@layer theme {
  :root {
    color-scheme: light dark;

    font-family: var(--font-humanist);
    letter-spacing: -0.01em;

    /* === COLORS === */
    --color-brand: oklch(50% 0.1 180); /* placeholder for client branding */
    
--color-pri: oklch(60% 0.10 60);
    --color-sec: oklch(70% 0.02 240);
    --color-pri-text: white;
    --color-sec-text: var(--text-color);

    --color-inf: oklch(55% 0.10 230);
    --color-suc: oklch(50% 0.12 150);
    --color-wrn: oklch(75% 0.15 90);
    --color-dgr: oklch(50% 0.12 25);
    --color-err: oklch(50% 0.12 25);

    --color-muted-pri: light-dark(
      color-mix(in oklch, var(--color-pri), var(--gry-5) 50%),
      color-mix(in oklch, var(--color-pri), var(--gry-5) 40%)
    );
    --color-muted-sec: light-dark(
      color-mix(in oklch, var(--color-sec), var(--gry-5) 50%),
      color-mix(in oklch, var(--color-sec), var(--gry-5) 40%)
    );

    /* === SURFACES === */
    --surface-bak: light-dark(#f0f3f0, #1a1d1a);
    --surface-def: light-dark(#f8faf8, #262926);
--surface-pri: light-dark(
      color-mix(in oklch, var(--color-pri), white 93%),
      color-mix(in oklch, var(--color-pri), var(--surface-bak) 90%)
    );
    --surface-sec: light-dark(
      color-mix(in oklch, var(--color-sec), white 93%),
      color-mix(in oklch, var(--color-sec), var(--surface-bak) 90%)
    );
    --surface-gla: var(--glass-bg-2);

    /* Status surfaces */
    --surface-inf: light-dark(
      color-mix(in oklch, var(--color-inf), white 93%),
      color-mix(in oklch, var(--color-inf), var(--surface-bak) 90%)
    );
    --surface-suc: light-dark(
      color-mix(in oklch, var(--color-suc), white 93%),
      color-mix(in oklch, var(--color-suc), var(--surface-bak) 90%)
    );
    --surface-wrn: light-dark(
      color-mix(in oklch, var(--color-wrn), white 93%),
      color-mix(in oklch, var(--color-wrn), var(--surface-bak) 90%)
    );
    --surface-dgr: light-dark(
      color-mix(in oklch, var(--color-dgr), white 93%),
      color-mix(in oklch, var(--color-dgr), var(--surface-bak) 90%)
    );

    /* Component surfaces */
    --surface-inp: light-dark(#fcfefc, #1f221f);
    --surface-border: light-dark(#c8d0c8, #3a403a);
    --surface-hover: light-dark(#dfe5df, #2a302a);

    /* Surface utility system base */
    --_surface-base: var(--surface-def);

    /* Legacy surfaces (deprecated - to be removed) */
    --surface-inset: light-dark(#e8ebe8, #161916);
    --surface-raised: light-dark(#f4f7f4, #2a302a);

    /* === SHADOW === */
    --shadow-out-md: var(--shadow-2);
    --shadow-in-md: var(--inner-shadow-2);
    --shadow-md: 0 2px 8px -2px rgb(40 50 50 / 0.15), 0 4px 12px -4px rgb(40 50 50 / 0.1);
    --shadow-card:
      0 1px 2px 0 rgb(40 50 50 / 0.04),
      0 1px 6px -1px rgb(40 50 50 / 0.03),
      0 2px 4px 0 rgb(40 50 50 / 0.03);
    --shadow-card-hover:
      0 2px 4px 0 rgb(40 50 50 / 0.05),
      0 4px 12px -2px rgb(40 50 50 / 0.04),
      0 6px 8px 0 rgb(40 50 50 / 0.03);

    /* === SPACING === */
    --space-xs: var(--size-1);
    --space-sm: var(--size-2);
    --space-md: var(--size-3);
    --space-lg: var(--size-4);
    --space-xl: var(--size-5);
    --grid-gap: var(--space-sm);

    /* === RADIUS === */
    --radius-sm: var(--radius-2);
    --radius-md: var(--radius-3);
    --radius-lg: var(--radius-4);
    --radius-btn: var(--radius-2);
    --radius-card: var(--radius-3);

    /* === TEXT === */
    --text-color: light-dark(#2a302a, #e8ebe8);
    --text-muted: light-dark(#5a665a, #9aa09a);
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;

    /* === HR === */
    --color-hr: light-dark(#c8d0c8, #3a403a);

    /* === BORDERS === */
    --border-subtle: 1px solid light-dark(#d8e0d8, #3a403a);
    --border-muted: 1px solid light-dark(#c8d0c8, #4a524a);

    /* === GLASS === */
    --glass-bg: var(--glass-bg-3);
    --glass-border: var(--glass-border-3);
    --glass-blur: var(--glass-blur-3);
    --glass-shadow: var(--glass-shadow-3);

    /* === BUTTON === */
    --btn-height-sm: 1.875rem;
    --btn-height-md: 2.375rem;
    --btn-height-lg: 2.875rem;
    
    /* === INTERACTION STATES === */
    --hover-outline-width: 2px;
    --hover-outline-color-mix: 85%;
    --active-outline-color-mix: 70%;
    --active-bg-darken: 20%;

    /* === CARD === */
    --card-padding: var(--space-sm);
    --card-border-radius: var(--radius-3);
    --card-border-size: 1px;
    --card-border: light-dark(
      color-mix(in oklch, var(--gry-3), transparent 60%),
      color-mix(in oklch, var(--gry-7), transparent 60%)
    );
    --card-pri-border: light-dark(
      color-mix(in oklch, var(--color-pri), transparent 85%),
      color-mix(in oklch, var(--color-pri), transparent 80%)
    );
    --card-sec-border: light-dark(
      color-mix(in oklch, var(--color-sec), transparent 85%),
      color-mix(in oklch, var(--color-sec), transparent 80%)
    );
    --card-gla-border: var(--glass-border-2);
    --card-width-sm: var(--width-ch-40);
    --card-width-md: var(--width-ch-60);
    --card-width-lg: var(--width-ch-80);
  }

  body[data-mode="light"] { color-scheme: light; }
  body[data-mode="dark"] { 
    color-scheme: dark;
    --glass-bg-1: rgba(0, 0, 0, 0.4);
    --glass-bg-2: rgba(0, 0, 0, 0.6);
    --glass-bg-3: rgba(0, 0, 0, 0.75);
    --glass-border-1: rgba(255, 255, 255, 0.05);
    --glass-border-2: rgba(255, 255, 255, 0.1);
    --glass-border-3: rgba(255, 255, 255, 0.15);
  }
}