/* ==========================================================================
   tokens.css — the ONLY file you restyle to re-skin BilluBnB. Everything else reads these variables.
   Idea: "the sunbeam spot" — every cat has a favourite patch of sun on the floor. Warm milk-cream paper,
   a sunbeam-gold accent that fills the loud things (the B pebble, primary buttons), calm sage as the dark
   surface, cocoa ink for text, blush + apricot as soft supporting tints.
   Verified pairs (python3 scripts/contrast.py css tokens.css --on "...") are listed under the palette.
   ========================================================================== */
@layer reset, tokens, base, components, sections, utilities, mobile;

@layer tokens {
  :root {
    /* --- palette --- */
    --paper:        #FFF8EE;   /* page background: warm milk */
    --paper-2:      #FBEBD3;   /* alternate section / soft card surface: apricot cream */
    --paper-3:      #FFFDF8;   /* raised surface: inputs, cards */
    --ink:          #3A2A22;   /* body text: cocoa */
    --ink-2:        #5E4A3E;   /* secondary text */
    --ink-3:        #766154;   /* captions, placeholders (still >= 4.5:1 on paper) */
    --sun:          #F7B733;   /* THE loud colour: the B pebble, primary buttons, marks. Ink sits ON it, never gold text on paper */
    --sun-press:    #E9A21A;   /* hover/pressed (stays light enough for ink text) */
    --sun-ink:      #3A2A22;   /* text ON sun surfaces */
    --amber:        #9A5200;   /* gold as TEXT on light surfaces (prices, small accents) */
    --apricot:      #FFD7AE;   /* soft highlight surface */
    --blush:        #F8CDC4;   /* warm tint (cards, quotes) */
    --sage:         #B8D3B2;   /* calm tint */
    --sage-deep:    #1F4A40;   /* DEEP: the dark section (trust, footer) — stays dark in every theme */
    --on-deep:      #FFF8EE;   /* text on deep */
    --on-deep-2:    #D9E6D6;   /* secondary text on deep */
    --wa:           #137A4A;   /* WhatsApp-action green, text-safe on paper; paper text on it */
    --wa-press:     #0E6239;
    --ok:           #1E7A4B;
    --warn:         #9A5200;
    --err:          #B3261E;
    --line:         rgba(58, 42, 34, .14);
    --line-strong:  rgba(58, 42, 34, .34);
    --focus:        #1F4A40;   /* focus ring colour (3:1+ on paper and on sun) */

    /* verified pairs (WCAG 2.x): "ink on paper" · "ink-2 on paper" · "ink-3 on paper" · "ink on paper-2" · "ink-2 on paper-2" ·
       "sun-ink on sun" · "sun-ink on sun-press" · "amber on paper" · "amber on paper-2" · "on-deep on sage-deep" · "on-deep-2 on sage-deep" ·
       "paper on wa" · "paper on wa-press" · "ink on blush" · "ink on apricot" · "ink on sage" · "paper on ink" · "sun on sage-deep" */

    /* --- type --- */
    --font-display: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
    --font-text:    "Nunito", "Nunito Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --step--1:   clamp(.875rem, .85rem + .10vw, .9375rem);   /* fine print never below 14px */
    --step-0:    clamp(1rem, .97rem + .15vw, 1.125rem);
    --step-1:    clamp(1.2rem, 1.12rem + .4vw, 1.45rem);
    --step-2:    clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
    --step-3:    clamp(1.9rem, 1.5rem + 2vw, 3.1rem);
    --step-4:    clamp(2.4rem, 1.6rem + 4vw, 4.9rem);
    --step-hero: clamp(4.6rem, 20vw, 15rem);   /* the giant layered "Billu" / "BnB" */
    --measure:   62ch;

    /* --- space, layout --- */
    --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem;
    --space-6: 2rem;   --space-7: 3rem;  --space-8: clamp(3rem, 2rem + 5vw, 6rem); --space-9: clamp(4.5rem, 3rem + 8vw, 9rem);
    --gutter: clamp(1rem, 4vw, 2.5rem);
    --maxw: 1240px;
    --header-h: 64px;

    /* --- shape, depth, motion --- */
    --r-sm: 12px; --r-md: 20px; --r-lg: 32px; --r-pill: 999px;
    --shadow-1: 0 1px 2px rgba(58,42,34,.06), 0 10px 26px -14px rgba(58,42,34,.28);
    --shadow-2: 0 2px 6px rgba(58,42,34,.08), 0 30px 60px -26px rgba(58,42,34,.42);
    --glow:     0 18px 44px -18px color-mix(in srgb, var(--sun) 80%, transparent);
    --ease:     cubic-bezier(.2, .8, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --dur-1: .16s; --dur-2: .3s; --dur-3: .7s;


    /* --- added by the public-site build (all measured with scripts/contrast.py, see docs/DESIGN.md §11) --- */
    --sage-tint:    #E5EFE0;   /* calm light surface (the "day" and trust sections) */
    --sun-soft:     #FFE9B5;   /* soft sun: icon pebbles, highlights on paper */
    --sun-deep:     #B06C00;   /* gold for graphics only — whisker rules, dotted paths, stars (>= 3.5:1 on paper, paper-3, paper-2 and sage-tint); never text */
    --blush-soft:   #FCE6DF;   /* review / quote surface */
    --deep-2:       #2A5C50;   /* raised surface on the deep sage (cards inside dark sections) */
    --deep-line:    rgba(255, 248, 238, .18);
    --sheet-r:      clamp(26px, 5.5vw, 68px);   /* rounded top edge of each section "sheet" */
    --arch-r:       var(--r-md);               /* bottom corner radius of every arched window */

    --z-header: 900; --z-bar: 800; --z-drawer: 1000; --z-toast: 99999;
    color-scheme: light;
  }
}