/* =========================================================================
   REOL — design tokens
   -------------------------------------------------------------------------
   The whole visual language in one file. Nothing downstream hardcodes a
   colour, a radius or a font — if a value appears twice in a stylesheet it
   belongs here instead.

   The palette is drawn from the clothes: unbleached silk, oxblood zari
   thread, antique gold, and the deep ink of a kohl line. It is committed to
   light: a bridal-wear storefront read on a phone in a shop is not the place
   for a dark theme, and a half-converted one looks cheaper than no theme at
   all. The admin panel shares these tokens so the two never drift.
   ========================================================================= */

:root {
    /* ---------------------------------------------------------- palette -- */

    /* Grounds — unbleached silk through to raw parchment. */
    --ivory:            #fbf8f3;
    --ivory-warm:       #f5efe4;
    --parchment:        #ede4d3;
    --sand:             #ddd0ba;

    /* Oxblood — the brand's primary. */
    --wine-900:         #3d0f18;
    --wine-800:         #55151f;
    --wine:             #6e1d2b;
    --wine-600:         #8a2a3a;
    --wine-400:         #b05264;
    --wine-100:         #f0dde0;

    /* Antique gold — accents, rules, small flourishes. Never large areas. */
    --gold-800:         #7d5f1c;
    --gold:             #b08d3f;
    --gold-400:         #c9a961;
    --gold-100:         #f2e7cd;

    /* Ink — text. */
    --ink:              #231a18;
    --ink-70:           #554743;
    --ink-50:           #7d716d;
    --ink-30:           #a89d99;
    --ink-15:           #d6cec9;
    --ink-08:           #e8e2dd;

    --white:            #ffffff;

    /* Feedback. Tuned warm so they sit inside the palette rather than on it. */
    --success:          #2f6b4f;
    --success-bg:       #e4efe8;
    --danger:           #a32a28;
    --danger-bg:        #f8e3e1;
    --warning:          #8a5a12;
    --warning-bg:       #fbeed6;
    --info:             #2b5470;
    --info-bg:          #e3edf4;

    /* --------------------------------------------------- the parlour -- */

    /* The shopkeeper's rooms are the one dark surface in the whole site, and
       they are deliberately a *place*, not a theme: a lit shop after closing,
       which is when you actually get shown things properly. Nothing outside
       .parlour-page and .gate uses these, so the storefront stays committed to
       light exactly as the palette above intends. */
    --night:            #171012;
    --night-raised:     #211719;
    --night-soft:       #2c2023;
    --night-line:       #3a2b2e;
    --night-text:       #f2e9e2;
    --night-muted:      #b3a099;

    /* The light in the room: the lamp over the counter, the shaft it throws
       across the floor, and the dust drifting through it. Alpha values, so
       they layer over whatever surface they land on. */
    --lamp-gold:        rgba(201, 169, 97, 0.13);
    --lamp-wine:        rgba(176, 82, 100, 0.10);
    --lamp-shaft:       rgba(201, 169, 97, 0.045);
    --mote:             rgba(242, 231, 205, 0.5);
    --gilt:             rgba(201, 169, 97, 0.28);

    /* The miniature. Flat pigment, the way a painting on paper is flat: one
       tone per plane, no gradients on the figure. The skin is a warm sienna
       rather than a "skin tone" — a miniature paints people in earth, and a
       naturalistic tone here would sit outside every other colour on the
       site. Only the shopkeeper's portrait uses these. */
    --mk-skin:          #a86b45;
    --mk-skin-shade:    #7a4a2c;
    --mk-hair:          #2b1d16;

    /* One accent per door, so a room is recognisable before it is read. */
    --door-bridal:      #b0344a;
    --door-modern:      #7d9aa8;
    --door-celebration: #c4739b;
    --door-festive:     #c9a961;

    /* ------------------------------------------------------- semantics -- */

    --bg:               var(--ivory);
    --bg-raised:        var(--white);
    --bg-sunken:        var(--ivory-warm);
    --border:           var(--ink-15);
    --border-soft:      var(--ink-08);
    --text:             var(--ink);
    --text-muted:       var(--ink-50);
    --text-subtle:      var(--ink-30);
    --accent:           var(--wine);
    --accent-hover:     var(--wine-800);

    /* ----------------------------------------------------- typography -- */

    /* Cormorant is the voice of the brand; the stack behind it is chosen so an
       offline or blocked webfont still renders an old-style serif, not Times. */
    --font-display: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype',
                    Palatino, 'Book Antiqua', Georgia, serif;
    --font-body:    'Jost', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                    Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono:    ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

    /* A modular scale at 1.25, rounded to sane pixel values. */
    --text-xs:      0.75rem;
    --text-sm:      0.8125rem;
    --text-base:    0.9375rem;
    --text-md:      1.0625rem;
    --text-lg:      1.25rem;
    --text-xl:      1.5rem;
    --text-2xl:     2rem;
    --text-3xl:     2.75rem;
    --text-4xl:     3.75rem;
    --text-5xl:     5rem;

    --leading-tight:  1.15;
    --leading-snug:   1.35;
    --leading-normal: 1.6;
    --leading-loose:  1.8;

    /* The letterspaced small-caps label used for eyebrows and section marks. */
    --tracking-label: 0.18em;
    --tracking-wide:  0.06em;

    /* --------------------------------------------------------- spacing -- */

    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.5rem;
    --space-6:  2rem;
    --space-7:  3rem;
    --space-8:  4rem;
    --space-9:  6rem;
    --space-10: 8rem;

    /* ------------------------------------------------------ structure -- */

    --container:       1280px;
    --container-tight: 780px;
    --container-wide:  1560px;
    --gutter:          clamp(1.25rem, 4vw, 3rem);

    /* Almost-square corners. Couture is not a rounded-rectangle business. */
    --radius-sm:   2px;
    --radius:      3px;
    --radius-lg:   6px;
    --radius-full: 999px;

    /* Shadows are warm-tinted, never neutral grey — a grey shadow on an ivory
       ground reads as dirt. */
    --shadow-sm: 0 1px 2px rgba(35, 26, 24, 0.05);
    --shadow:    0 2px 8px rgba(35, 26, 24, 0.07);
    --shadow-md: 0 8px 24px rgba(35, 26, 24, 0.09);
    --shadow-lg: 0 20px 50px rgba(35, 26, 24, 0.13);

    --ring: 0 0 0 3px rgba(110, 29, 43, 0.22);

    /* ------------------------------------------------------- motion -- */

    --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
    --fast:      140ms;
    --normal:    260ms;
    --slow:      520ms;

    --z-header:  100;
    --z-drawer:  200;
    --z-modal:   300;
    --z-toast:   400;
}

/* Anyone who has asked their OS to reduce motion gets no transitions at all,
   rather than shorter ones — parallax and reveals are the point of the setting. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --fast: 0ms;
        --normal: 0ms;
        --slow: 0ms;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}