/* tokens.css — single source of truth for colors, type, spacing, radius
 * Derived from stitch_baso_aci_mang_ace/nusantara_spice/DESIGN.md
 * Hand-edit this file when the design system changes; styles.css follows.
 */

:root {
  /* Surface scale (cream to neutral) */
  --color-surface:               #FBF9F1;
  --color-surface-dim:           #DCDAD2;
  --color-surface-bright:        #FBF9F1;
  --color-surface-container-lowest:  #FFFFFF;
  --color-surface-container-low:    #F5F4EC;
  --color-surface-container:        #F0EEE6;
  --color-surface-container-high:   #EAE8E0;
  --color-surface-container-highest:#E4E3DB;

  /* On-surface (text on cream) */
  --color-on-surface:            #1B1C17;
  --color-on-surface-variant:    #5C3F40;
  --color-surface-variant:       #E4E3DB;

  /* Inverse (for dark sections) */
  --color-inverse-surface:       #30312C;
  --color-inverse-on-surface:    #F3F1E9;

  /* Outline */
  --color-outline:               #906F70;
  --color-outline-variant:       #E5BDBE;

  /* Brand primary (Mang Ace red) */
  --color-primary:               #B80035;
  --color-primary-container:     #E11D48;
  --color-on-primary:            #FFFFFF;
  --color-on-primary-container:  #FFFAF9;
  --color-primary-fixed:         #FFDADA;
  --color-primary-fixed-dim:     #FFB3B6;
  --color-on-primary-fixed:      #40000C;
  --color-on-primary-fixed-variant: #920028;

  /* Brand secondary (sunny yellow) */
  --color-secondary:             #795900;
  --color-secondary-container:   #FFC329;
  --color-on-secondary:          #FFFFFF;
  --color-on-secondary-container:#6F5100;
  --color-secondary-fixed:       #FFDF9F;
  --color-secondary-fixed-dim:   #F9BD22;
  --color-on-secondary-fixed:    #261A00;
  --color-on-secondary-fixed-variant: #5C4300;

  /* Brand tertiary (warm orange) */
  --color-tertiary:              #984100;
  --color-tertiary-container:    #BF5300;
  --color-on-tertiary:           #FFFFFF;
  --color-on-tertiary-container: #FFFAF8;
  --color-tertiary-fixed:        #FFDBCA;
  --color-tertiary-fixed-dim:    #FFB690;
  --color-on-tertiary-fixed:     #341100;
  --color-on-tertiary-fixed-variant: #783200;

  /* Semantic */
  --color-error:                 #BA1A1A;
  --color-on-error:              #FFFFFF;
  --color-error-container:       #FFDAD6;
  --color-on-error-container:    #93000A;
  --color-success:               #16A34A;

  /* Typography stacks */
  --font-display: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (from DESIGN.md) */
  --text-display-xl:    clamp(2.5rem, 5vw + 1rem, 4.5rem);
  --text-headline-lg:   clamp(1.75rem, 2.5vw + 1rem, 2.5rem);
  --text-headline-lg-mobile: 1.75rem;
  --text-title-md:      1.25rem;
  --text-body-lg:       1.125rem;
  --text-body-md:       1rem;
  --text-label-sm:      0.875rem;
  --text-micro:         0.75rem;

  --line-tight:   1.1;
  --line-snug:    1.25;
  --line-base:    1.5;

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

  /* Spacing scale (8px base) */
  --space-xs:    4px;
  --space-sm:    12px;
  --space-md:    24px;
  --space-lg:    48px;
  --space-xl:    80px;
  --gutter:      20px;
  --margin-mobile: 16px;
  --margin-desktop: 64px;

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

  /* Shadows (tinted toward brand per DESIGN.md) */
  --shadow-sm:    0 1px 8px rgba(184, 0, 53, 0.04);
  --shadow-md:    0 8px 30px rgba(152, 65, 0, 0.08);
  --shadow-lg:    0 20px 40px rgba(184, 0, 53, 0.15);
  --shadow-xl:    0 25px 50px -12px rgba(184, 0, 53, 0.25);

  /* Layout */
  --container-max: 1200px;
  --header-height: 80px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
}