/* tokens.css — single source of truth for colors, type, spacing, radius.
 * Lacilose Leather. Palette follows the material: cognac leather on warm cream,
 * espresso for depth, brass for accents.
 * Hand-edit this file when the design system changes; styles.css follows.
 * Single light palette, no dark toggle — same approach as the surabi tenant.
 */

:root {
  /* Surface scale (warm cream to neutral) */
  --color-surface:                   #FAF6F0;
  --color-surface-dim:               #EDE4D8;
  --color-surface-container-lowest:  #FFFFFF;
  --color-surface-container-low:     #F6F1E9;
  --color-surface-container:         #F1EAE0;
  --color-surface-container-high:    #EAE1D4;
  --color-surface-container-highest: #E3D8C9;/* On-surface (text on cream)  RESERVED */
  --color-on-surface:          #231A14;
  --color-on-surface-variant:  #5B4A3C;

  /* Inverse (for dark sections) */
  --color-inverse-surface:     #2B1F17;
  --color-inverse-on-surface:  #F6F1E9;

  /* Outline */
  --color-outline:          #8C7A69;
  --color-outline-variant:  #DCCEBD;

  /* Brand primary (cognac leather) */
  --color-primary:              #8A4B1F;
  --color-primary-container:    #A85D2A;
  --color-on-primary:           #FFFFFF;
  --color-primary-fixed:        #F6E2CF;
  --color-on-primary-fixed:     #3A1C06;

  /* 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 (espresso) */
  --color-secondary:            #3E2B20; /* RESERVED */
  --color-secondary-container:  #5A4133;
  --color-on-secondary:         #FFFFFF;/* Brand tertiary (brass hardware)  RESERVED */
  --color-tertiary:             #7A6130; /* RESERVED */
  --color-tertiary-container:   #9A7B3F;
  --color-on-tertiary:          #FFFFFF; /* RESERVED */
  --color-tertiary-fixed:       #F2E6C9;

  /* Semantic */
  --color-error:     #BA1A1A; /* RESERVED */
  --color-on-error:  #FFFFFF;/* Channel brand colours, used only for the marketplace buttons.
     Darkened from each platform's own brand hue so white button text clears
     4.5:1. The published hues measured 3.09 (WhatsApp), 4.20 (Tokopedia) and
     4.30 (Shopee) against white, which all fail WCAG AA for body-size text. */
  --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 */
  /* Declared although no Lacilose page links a delivery platform: styles.css is
     shared across tenants and references it. Same hue as the cemilix tenant. */
  --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, tinted toward the leather brown */
  --shadow-sm: 0 1px 3px rgba(62, 43, 32, 0.07);
  --shadow-md: 0 6px 20px rgba(62, 43, 32, 0.10);
  --shadow-lg: 0 18px 40px rgba(62, 43, 32, 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;
}