/* tokens.css — single source of truth for colors, type, spacing, radius
 * Aremut 103 — Gula Aren Semut 100% Asli (Garut, Jawa Barat)
 * Warm brown/amber (gula aren) + forest green (organic/natural) + golden honey
 */

:root {
  /* Surface scale (warm cream to neutral) */
  --color-surface:               #FDFBF7;
  --color-surface-dim:           #E8E4DC;
  --color-surface-bright:        #FDFBF7;
  --color-surface-container-lowest:  #FFFFFF;
  --color-surface-container-low:    #F7F3EB;
  --color-surface-container:        #F2ECE1;
  --color-surface-container-high:   #ECE5D7;
  --color-surface-container-highest:#E4DCCD;

  /* On-surface (text on cream) */
  --color-on-surface:            #1C1917;
  --color-on-surface-variant:    #574838;
  --color-surface-variant:       #E4DCCD;

  /* Inverse (for dark sections) */
  --color-inverse-surface:       #292524;
  --color-inverse-on-surface:    #F5F0EB;

  /* Outline */
  --color-outline:               #8C7A6B;
  --color-outline-variant:       #D6C9BC;

  /* Brand primary (warm aren brown) */
  --color-primary:               #8B5E3C;
  --color-primary-container:     #A0714D;
  --color-on-primary:            #FFFFFF;
  --color-on-primary-container:  #FFFAF5;
  --color-primary-fixed:         #F5E6D8;
  --color-primary-fixed-dim:     #DFC2A8;
  --color-on-primary-fixed:      #331B08;
  --color-on-primary-fixed-variant: #6E4426;

  /* Brand secondary (forest green — organic/natural) */
  --color-secondary:             #2D5A27;
  --color-secondary-container:   #3E7B35;
  --color-on-secondary:          #FFFFFF;
  --color-on-secondary-container:#F0F7EE;
  --color-secondary-fixed:       #D4EDCE;
  --color-secondary-fixed-dim:   #A8D59D;
  --color-on-secondary-fixed:    #0B2407;
  --color-on-secondary-fixed-variant: #1F451B;

  /* Brand tertiary (golden honey — aren nira) */
  --color-tertiary:              #C4961A;
  --color-tertiary-container:    #D4A62A;
  --color-on-tertiary:           #FFFFFF;
  --color-on-tertiary-container: #FFFDF5;
  --color-tertiary-fixed:        #FBECC4;
  --color-tertiary-fixed-dim:    #F5D68A;
  --color-on-tertiary-fixed:     #3B2C00;
  --color-on-tertiary-fixed-variant: #785A04;

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

  /* 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 */
  --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 warm brown) */
  --shadow-sm:    0 1px 8px rgba(139, 94, 60, 0.06);
  --shadow-md:    0 8px 30px rgba(139, 94, 60, 0.10);
  --shadow-lg:    0 20px 40px rgba(139, 94, 60, 0.16);
  --shadow-xl:    0 25px 50px -12px rgba(139, 94, 60, 0.24);

  /* 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;
}