/* public/Styles/tokens.css — UniBite design tokens v3
   One language for the whole product, taken from the landing page:
   warm paper, olive ink, one orange, forest green for dark surfaces, lime for "your turn". */
:root {
    /* ─── Core palette ─────────────────────────────── */
    --paper:        #F8F5EE;   /* page */
    --paper-deep:   #EFEBE0;   /* sunken areas, hover rows */
    --card:         #FFFDF8;   /* raised surfaces */
    --ink:          #252A22;   /* text, dark buttons — 14.2:1 on paper */
    --muted:        #63665D;   /* secondary text — 5.6:1 on paper */
    --line:         #DEDFD3;   /* hairlines */
    --line-strong:  #C9C9BA;   /* input borders — 3:1 non-text */
    --orange:       #EF602E;   /* brand fill; carries --ink text (5.1:1), never white */
    --orange-hover: #FF7440;
    --orange-text:  #BA3C16;   /* orange as text on paper — 5.5:1 */
    --orange-tint:  #FBE6DA;
    --green:        #283C2E;   /* dark surfaces: sidebars, footer, panels */
    --green-2:      #34493A;
    --lime:         #E9EDAC;   /* highlight: active nav, pickup code, "ready" */

    /* ─── Status (dark text on tint always ≥ 4.5:1) ─── */
    --ok:        #2F6B3A;  --ok-bg:     #E1EDD9;
    --warn:      #8A5A00;  --warn-bg:   #F7EBC8;
    --bad:       #A8321C;  --bad-bg:    #F8DED6;
    --info:      #2D5470;  --info-bg:   #DCE7EE;

    /* ─── Type ─────────────────────────────────────── */
    --font-display: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
    --font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-serif:   'Instrument Serif', Georgia, serif;

    --fs-xs:   0.8125rem;  /* 13px — the floor for informational text */
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-lg:   1.125rem;
    --fs-xl:   1.375rem;
    --fs-2xl:  1.75rem;
    --fs-3xl:  2.25rem;
    --fs-4xl:  clamp(2.25rem, 5vw, 3.25rem);

    /* ─── Space / radius / motion ─────────────────── */
    --space-1: .25rem; --space-2: .5rem;  --space-3: .75rem; --space-4: 1rem;
    --space-5: 1.5rem; --space-6: 2rem;   --space-8: 3rem;   --space-10: 4rem;
    --radius-sm: 5px;      /* chips, small controls */
    --radius-md: 7px;      /* buttons, inputs — same as landing */
    --radius-lg: 12px;     /* cards */
    --radius-xl: 18px;     /* sheets, hero panels */
    --radius-full: 999px;
    --shadow-1: 0 1px 0 rgba(37, 42, 34, .06);
    --shadow-2: 0 10px 30px -12px rgba(37, 42, 34, .25);
    --ease: cubic-bezier(.4, 0, .2, 1);
    --t-fast: 150ms var(--ease);
    --t-med:  260ms var(--ease);

    --shell: 1180px;
    --header-h: 72px;
    --bottom-nav-height: 64px;

    /* ─── Legacy aliases — older stylesheets and inline JS styles still reference these ─── */
    --color-primary: var(--orange);        --color-primary-dark: var(--orange-text);
    --color-primary-mid: var(--orange);    --color-primary-light: var(--orange-hover);
    --color-primary-subtle: var(--orange-tint);
    --color-white: #FFFFFF;
    --color-gray-50: var(--paper);   --color-gray-100: var(--paper-deep);
    --color-gray-200: var(--line);   --color-gray-300: var(--line-strong);
    --color-gray-400: #8C8E83;       --color-gray-500: var(--muted);
    --color-gray-600: var(--muted);  --color-gray-700: #3B4037;
    --color-gray-800: var(--ink);    --color-gray-900: var(--ink);
    --color-success: var(--ok);  --color-success-light: var(--ok-bg);
    --color-warning: var(--warn); --color-warning-light: var(--warn-bg);
    --color-error: var(--bad);   --color-error-light: var(--bad-bg);
    --color-info: var(--info);   --color-info-light: var(--info-bg);
    --font-family-base: var(--font-body);
    --font-family-display: var(--font-display);
    --border-color: var(--line);
    --transition-fast: var(--t-fast);
    --transition-normal: var(--t-med);
    --primary: var(--orange); --primary-dark: var(--orange-text);
    --text: var(--ink); --text-light: var(--muted); --text-lighter: var(--muted);
    --background: var(--paper); --background-alt: var(--paper-deep); --border: var(--line);
}