/* Sora Colors — Integrated Palette (Gold/Green) */
:root {
  /* Brand tokens */
  --brand-primary: #9E832B;   /* gold */
  --brand-accent:  #166B38;   /* deep green */
  --brand-secondary:#BEE7A5;  /* mint */

  /* Neutral + base */
  --text: #333333;
  --bg:   #FFFFFF;

  /* Derived scales */
  /* Gold */
  --primary-600: color-mix(in srgb, var(--brand-primary) 85%, black);
  --primary-500: var(--brand-primary);
  --primary-400: color-mix(in srgb, var(--brand-primary) 85%, white);
  --primary-200: color-mix(in srgb, var(--brand-primary) 60%, white);
  --primary-100: color-mix(in srgb, var(--brand-primary) 20%, white);

  /* Deep green */
  --accent-600: color-mix(in srgb, var(--brand-accent) 85%, black);
  --accent-500: var(--brand-accent);
  --accent-400: color-mix(in srgb, var(--brand-accent) 85%, white);
  --accent-200: color-mix(in srgb, var(--brand-accent) 60%, white);
  --accent-100: color-mix(in srgb, var(--brand-accent) 20%, white);

  /* Mint */
  --secondary-500: var(--brand-secondary);
  --secondary-200: color-mix(in srgb, var(--brand-secondary) 60%, white);
  --secondary-100: color-mix(in srgb, var(--brand-secondary) 20%, white);

  /* Sora-prefixed aliases */
  --sora-brand-900: var(--primary-600);
  --sora-brand-700: color-mix(in srgb, var(--brand-primary) 70%, black);
  --sora-brand-500: var(--primary-500);
  --sora-brand-300: var(--primary-200);
  --sora-brand-100: var(--primary-100);

  --sora-accent-500: var(--accent-500);
  --sora-accent-300: var(--accent-200);

  /* Neutrals */
  --sora-neutral-900:#0B1320;
  --sora-neutral-700:#2C3A4A;
  --sora-neutral-500:#5B6B7C;
  --sora-neutral-300:#B9C3CE;
  --sora-neutral-100:#F5F7FA;

  /* Surfaces & backgrounds */
  --sora-surface: var(--bg);
  --sora-background: var(--bg);

  /* Semantic roles */
  --heading: var(--primary-600);
  --link: var(--accent-500);
  --link-hover: var(--primary-500);
  --cta-bg: var(--accent-500);
  --cta-text: #FFFFFF;
  --muted-text: color-mix(in srgb, var(--text) 70%, white);
  --divider: color-mix(in srgb, var(--accent-500) 18%, white);
  --panel: var(--secondary-100);
  --callout: var(--secondary-200);
  --focus-ring: color-mix(in srgb, var(--accent-500) 50%, white);

  /* Shadows & radii */
  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: 1.25rem;
  --shadow-1: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05);
  --shadow-2: 0 4px 16px rgba(0,0,0,.12);

  /* Back-compat aliases */
  --brand-100: var(--sora-brand-100);
  --brand-300: var(--sora-brand-300);
  --brand-500: var(--sora-brand-500);
  --brand-700: var(--sora-brand-700);
  --brand-900: var(--sora-brand-900);
  --neutral-100: var(--sora-neutral-100);
  --neutral-300: var(--sora-neutral-300);
  --neutral-500: var(--sora-neutral-500);
  --neutral-700: var(--sora-neutral-700);
  --neutral-900: var(--sora-neutral-900);
  --surface: var(--sora-surface);
  --background: var(--sora-background);
  --ring: var(--focus-ring);

  /* Aliases used by hero / borders */
  --sora-green: var(--accent-600);
  --sora-gold:  var(--primary-500);

  /* Bridge var */
  --sora-focus: var(--focus-ring);
}

/* Tiny baseline helpers */
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  line-height: 1.5;
}
h1, h2, h3 {
  color: var(--heading);
  letter-spacing: .2px;
  margin: 0 0 .5rem 0;
}
a { color: var(--link); text-decoration: none; }
a:hover, a:focus-visible { color: var(--link-hover); text-decoration: underline; }

/* Dividers & panels */
.hr, .divider { height: 1px; background: var(--divider); border: 0; margin: 1.25rem 0; }
.section--emphasis {
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--accent-500) 12%, white);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}
.callout { background: var(--callout); border-left: 6px solid var(--accent-500); padding: 1rem 1.25rem; border-radius: var(--radius-md); }

/* Optional dark mode baseline */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1111; --text: #ECECEC;
    --heading: color-mix(in srgb, var(--primary-400) 70%, white);
    --divider: color-mix(in srgb, var(--accent-500) 25%, black);
    --panel: color-mix(in srgb, var(--secondary-100) 12%, #1a1c1b);
    --callout: color-mix(in srgb, var(--secondary-200) 20%, #1a1c1b);
    --cta-text: #FFFFFF;
  }
}