/* tokens.css — single source of truth for colors, type, spacing, radius.
 * Cemilix. Palette follows the product: paprika red and cheese gold on a warm
 * fried-snack cream.
 * Hand-edit this file when the design system changes; styles.css follows.
 * Single light palette, no dark toggle.
 *
 * styles.css is shared verbatim with the lacilose tenant — only this file differs.
 * Keep the token NAMES identical across tenants or styles.css breaks.
 */

:root {
  /* Surface scale (warm cream) */
  --color-surface:                   #FFFAF2;
  --color-surface-dim:               #F2E6D4;
  --color-surface-container-lowest:  #FFFFFF;
  --color-surface-container-low:     #FEF5E9;
  --color-surface-container:         #FBEFE0;
  --color-surface-container-high:    #F7E7D3;
  --color-surface-container-highest: #F2DEC5;/* On-surface  RESERVED */
  --color-on-surface:          #2A1B10;   /* 16.0:1 on surface */
  --color-on-surface-variant:  #6B5342;   /* 6.87:1 on surface */

  /* Inverse (dark sections) */
  --color-inverse-surface:     #32200F;
  --color-inverse-on-surface:  #FEF5E9;

  /* Outline */
  --color-outline:          #94785F;
  --color-outline-variant:  #E8D5BD;

  /* Brand primary (paprika) */
  --color-primary:              #B33A12;  /* 5.95:1 with white text, 5.72:1 as text on cream */
  --color-primary-container:    #C9471B;
  --color-on-primary:           #FFFFFF;
  --color-primary-fixed:        #FBDFD0;
  --color-on-primary-fixed:     #4A1403;

  /* The base steps of the secondary/tertiary/error ramps and the tokens marked
     RESERVED below are intentionally declared but unconsumed: the palette is kept
     complete so a new component has a correct colour to reach for, and so both
     tenants declare an identical set of names. Do not delete one side only. */

  /* Brand secondary (roasted brown) */
  --color-secondary:            #5A3A1E; /* RESERVED */
  --color-secondary-container:  #74502E;
  --color-on-secondary:         #FFFFFF;/* Brand tertiary (cheese gold)  RESERVED */
  --color-tertiary:             #7A5B10; /* RESERVED */
  --color-tertiary-container:   #9C7616;
  --color-on-tertiary:          #FFFFFF; /* RESERVED */
  --color-tertiary-fixed:       #FBEBC2;

  /* Semantic */
  --color-error:     #BA1A1A; /* RESERVED */
  --color-on-error:  #FFFFFF;/* Channel brand colours. Darkened from each platform's own hue so white button
     text clears 4.5:1; the published hues fail AA. Ratios noted. */
  --color-whatsapp:   #178043;  /* 4.99:1 on white */
  --color-tokopedia:  #0F7A40;  /* 5.41:1 */
  --color-shopee:     #C2410C;  /* 5.18:1 */
  --color-lazada:     #1A3A8F;  /* 10.27:1 */
  --color-grab:       #00803C;  /* 5.26:1 */

  /* Typography stacks */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Type scale */
  --text-display-xl:  clamp(2.25rem, 4.5vw + 1rem, 4rem);
  --text-headline-lg: clamp(1.625rem, 2.2vw + 1rem, 2.375rem);
  --text-title-lg:    clamp(1.25rem, 1vw + 1rem, 1.5rem);
  --text-title-md:    1.125rem;
  --text-body-lg:     1.0625rem;
  --text-body-md:     1rem;
  --text-label-sm:    0.875rem;
  --text-micro:       0.75rem;

  --line-tight: 1.12;
  --line-snug:  1.3; /* RESERVED */
  --line-base:  1.6;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Spacing scale */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  24px;
  --space-lg:  48px;
  --space-xl:  80px;
  --gutter:    16px;

  /* Border radius */
  --radius-sm:   0.25rem;
  --radius:      0.5rem;
  --radius-md:   0.75rem; /* RESERVED */
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(50, 32, 15, 0.07);
  --shadow-md: 0 6px 20px rgba(50, 32, 15, 0.10);
  --shadow-lg: 0 18px 40px rgba(50, 32, 15, 0.16);

  /* Layout */
  --touch-min:     44px;   /* minimum comfortable tap target (WCAG 2.5.5) */
  --container-max: 1120px;
  --header-height: 72px;

  /* Motion */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 280ms;
}