/* ============================================================
   MAYAGA ENTERPRISES — Design Tokens
   Palette: Pilbara Red Ochre, warm sand, deep charcoal, leaf green
   Inspired by Ngurrangga / Ngarluma & Yindjibarndi country
   ============================================================ */

:root,
[data-theme='light'] {
  /* === Surfaces === */
  --color-bg:             #F8F4EE;   /* warm sand */
  --color-surface:        #FAF7F2;
  --color-surface-2:      #FDF9F5;
  --color-surface-offset: #EFE8DF;
  --color-surface-deep:   #E6DDD0;
  --color-divider:        #D9CFC3;
  --color-border:         #CBBFB0;

  /* === Text === */
  --color-text:           #2A1F14;   /* deep charcoal-brown */
  --color-text-muted:     #6E5F4F;
  --color-text-faint:     #B09E8C;
  --color-text-inverse:   #FAF7F2;

  /* === Primary — Pilbara Red Ochre === */
  --color-primary:        #9C3A22;
  --color-primary-hover:  #7A2A18;
  --color-primary-active: #5C1F10;
  --color-primary-light:  #F3DDD6;

  /* === Accent — Spinifex Green === */
  --color-accent:         #4A6741;
  --color-accent-hover:   #375030;
  --color-accent-light:   #D5E3D1;

  /* === Gold — Bush Honey === */
  --color-gold:           #C48B2A;
  --color-gold-light:     #F5E6CB;

  /* === Semantic === */
  --color-success:        #4A7A28;
  --color-error:          #A02525;
  --color-warning:        #B06820;

  /* === Radius === */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-full: 9999px;

  /* === Transitions === */
  --transition-fast:        120ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow:        380ms cubic-bezier(0.16, 1, 0.3, 1);

  /* === Shadows === */
  --shadow-sm: 0 1px 3px rgba(42,31,20,0.08);
  --shadow-md: 0 4px 14px rgba(42,31,20,0.10);
  --shadow-lg: 0 12px 40px rgba(42,31,20,0.14);

  /* === Type Scale (fluid) === */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);
  --text-hero: clamp(3rem,     0.5rem  + 7vw,    8rem);

  /* === Spacing === */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* === Content widths === */
  --content-narrow:  640px;
  --content-default: 960px;
  --content-wide:    1200px;

  /* === Fonts === */
  --font-display: 'Zodiak', 'Georgia', serif;
  --font-body:    'Satoshi', 'Helvetica Neue', sans-serif;
}

/* DARK MODE */
[data-theme='dark'] {
  --color-bg:             #1A1208;
  --color-surface:        #221808;
  --color-surface-2:      #2A1E10;
  --color-surface-offset: #1E1508;
  --color-surface-deep:   #160F04;
  --color-divider:        #3A2E1E;
  --color-border:         #4A3A28;
  --color-text:           #E8DDD0;
  --color-text-muted:     #9A8878;
  --color-text-faint:     #6A5A4A;
  --color-text-inverse:   #2A1F14;
  --color-primary:        #D4614A;
  --color-primary-hover:  #E07A62;
  --color-primary-active: #E89282;
  --color-primary-light:  #3A2018;
  --color-accent:         #7AAD6E;
  --color-accent-hover:   #91C082;
  --color-accent-light:   #1E3018;
  --color-gold:           #DFA84A;
  --color-gold-light:     #3A2A12;
  --color-success:        #7AAD5A;
  --color-error:          #D46060;
  --color-warning:        #D4944A;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:             #1A1208;
    --color-surface:        #221808;
    --color-surface-2:      #2A1E10;
    --color-surface-offset: #1E1508;
    --color-surface-deep:   #160F04;
    --color-divider:        #3A2E1E;
    --color-border:         #4A3A28;
    --color-text:           #E8DDD0;
    --color-text-muted:     #9A8878;
    --color-text-faint:     #6A5A4A;
    --color-text-inverse:   #2A1F14;
    --color-primary:        #D4614A;
    --color-primary-hover:  #E07A62;
    --color-primary-active: #E89282;
    --color-primary-light:  #3A2018;
    --color-accent:         #7AAD6E;
    --color-accent-hover:   #91C080;
    --color-accent-light:   #1E3018;
    --color-gold:           #DFA84A;
    --color-gold-light:     #3A2A12;
  }
}