/* ─────────────────────────────────────────────────────────
   MorphAcademy — Design Tokens
   Warm Library palette · Sage green · Lora + DM Sans
   ───────────────────────────────────────────────────────── */

:root {
  /* ── Surfaces ── */
  --bg-page:           #F7F4EE;
  --bg-surface:        #FEFCF8;
  --bg-surface-raised: #F0EDE5;
  --bg-surface-sunken: #E8E3D9;
  --bg-sidebar:        #F3F0E8;

  /* ── Accent — sage green ── */
  --accent:            #5E8C6A;
  --accent-hover:      #4D7558;
  --accent-subtle:     rgba(94, 140, 106, 0.10);
  --accent-border:     rgba(94, 140, 106, 0.28);

  /* ── Text — warm brown tones ── */
  --text-primary:      #2C2317;
  --text-secondary:    #6B5A4E;
  --text-tertiary:     #A8937F;
  --text-placeholder:  #C4B09A;
  --text-on-accent:    #FFFFFF;

  /* ── Borders ── */
  --border-default:    #DDD7CC;
  --border-subtle:     #E8E2D8;
  --border-emphasis:   #C8C0B3;

  /* ── Semantic ── */
  --success:           #5E8C6A;
  --success-bg:        rgba(94, 140, 106, 0.12);
  --warning:           #B8862A;
  --warning-bg:        rgba(184, 134, 42, 0.10);
  --error:             #A8514A;
  --error-bg:          rgba(168, 81, 74, 0.10);

  /* ── Chat surfaces ── */
  --teacher-surface:   #EEF5F0;
  --teacher-border:    #D0E4D6;
  --student-surface:   #5E8C6A;
  --student-text:      #FFFFFF;

  /* ── Shadows — softer, warmer ── */
  --shadow-xs:  0 1px 2px rgba(44, 35, 23, 0.05);
  --shadow-sm:  0 2px 6px rgba(44, 35, 23, 0.07), 0 1px 2px rgba(44, 35, 23, 0.04);
  --shadow-md:  0 4px 16px rgba(44, 35, 23, 0.09), 0 2px 4px rgba(44, 35, 23, 0.04);
  --shadow-lg:  0 12px 40px rgba(44, 35, 23, 0.11), 0 4px 12px rgba(44, 35, 23, 0.05);
  --shadow-xl:  0 24px 64px rgba(44, 35, 23, 0.14);

  /* ── Spacing ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;

  /* ── Radius — softer curves ── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ── Typography — Lora + DM Sans ── */
  --font-display: 'Lora', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   clamp(1.3rem, 1.2rem + 0.4vw, 1.5rem);
  --text-2xl:  clamp(1.6rem, 1.35rem + 0.55vw, 1.9rem);
  --text-3xl:  clamp(2.1rem, 1.6rem + 1vw, 2.6rem);

  --leading-tight:   1.4;
  --leading-normal:  1.65;
  --leading-relaxed: 1.8;

  /* ── Transitions ── */
  --ease-out:    cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.05);
  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-slow: 380ms;

  /* ── Layout ── */
  --header-h:   60px;
  --sidebar-w:  272px;
  --chat-max-w: 920px;
}

/* ── Palette: Parchment — Kindle warm ────────────────── */
[data-palette="parchment"] {
  --bg-page:           #EDE8D3;
  --bg-surface:        #F5F0DC;
  --bg-surface-raised: #E4DDC4;
  --bg-surface-sunken: #D8D0B5;
  --bg-sidebar:        #EAE3CC;

  --accent:            #8B6A40;
  --accent-hover:      #7A5A32;
  --accent-subtle:     rgba(139, 106, 64, 0.12);
  --accent-border:     rgba(139, 106, 64, 0.28);

  --text-primary:      #2A1A0C;
  --text-secondary:    #6A4A28;
  --text-tertiary:     #A08055;
  --text-placeholder:  #B89870;
  --text-on-accent:    #FFFFFF;

  --border-default:    #D0C4A0;
  --border-subtle:     #DCCFAC;
  --border-emphasis:   #C0B090;

  --teacher-surface:   #EDE5CC;
  --teacher-border:    #D0C4A0;
  --student-surface:   #8B6A40;
  --student-text:      #FFFFFF;

  --success:           #5E7A40;
  --success-bg:        rgba(94, 122, 64, 0.12);
  --warning:           #B07A20;
  --warning-bg:        rgba(176, 122, 32, 0.12);
  --error:             #A04040;
  --error-bg:          rgba(160, 64, 64, 0.12);
}

/* ── Palette: Ocean — soft teal ───────────────────────── */
[data-palette="ocean"] {
  --bg-page:           #EFF5F7;
  --bg-surface:        #FAFCFD;
  --bg-surface-raised: #E2EEF3;
  --bg-surface-sunken: #D4E6EE;
  --bg-sidebar:        #E8F2F6;

  --accent:            #3D8EA8;
  --accent-hover:      #2E7A94;
  --accent-subtle:     rgba(61, 142, 168, 0.10);
  --accent-border:     rgba(61, 142, 168, 0.28);

  --text-primary:      #102030;
  --text-secondary:    #3A6070;
  --text-tertiary:     #80A8B8;
  --text-placeholder:  #A0C0CC;
  --text-on-accent:    #FFFFFF;

  --border-default:    #C0D8E4;
  --border-subtle:     #D4E8F0;
  --border-emphasis:   #A8CCDA;

  --teacher-surface:   #E4F0F6;
  --teacher-border:    #BCE0EE;
  --student-surface:   #3D8EA8;
  --student-text:      #FFFFFF;

  --success:           #3A8060;
  --success-bg:        rgba(58, 128, 96, 0.10);
  --warning:           #A07830;
  --warning-bg:        rgba(160, 120, 48, 0.10);
  --error:             #A04848;
  --error-bg:          rgba(160, 72, 72, 0.10);
}

/* ── Palette: Dusk — soft lavender ───────────────────── */
[data-palette="dusk"] {
  --bg-page:           #F4F1F8;
  --bg-surface:        #FDFBFF;
  --bg-surface-raised: #EAE4F2;
  --bg-surface-sunken: #DDD5E8;
  --bg-sidebar:        #F0ECF6;

  --accent:            #7A5EA8;
  --accent-hover:      #6A4E98;
  --accent-subtle:     rgba(122, 94, 168, 0.10);
  --accent-border:     rgba(122, 94, 168, 0.28);

  --text-primary:      #1A1025;
  --text-secondary:    #524068;
  --text-tertiary:     #9880B0;
  --text-placeholder:  #B4A0C8;
  --text-on-accent:    #FFFFFF;

  --border-default:    #D5CCDF;
  --border-subtle:     #E2DCEA;
  --border-emphasis:   #C0B4D0;

  --teacher-surface:   #EBE6F4;
  --teacher-border:    #D5CCDF;
  --student-surface:   #7A5EA8;
  --student-text:      #FFFFFF;

  --success:           #508060;
  --success-bg:        rgba(80, 128, 96, 0.10);
  --warning:           #9A7020;
  --warning-bg:        rgba(154, 112, 32, 0.10);
  --error:             #984A60;
  --error-bg:          rgba(152, 74, 96, 0.10);
}

/* ── Dark mode accent variants per palette ────────────── */
[data-theme="dark"][data-palette="parchment"] {
  --accent:        #C09060;
  --accent-hover:  #B08050;
  --accent-subtle: rgba(192, 144, 96, 0.14);
  --accent-border: rgba(192, 144, 96, 0.28);
}
[data-theme="dark"][data-palette="ocean"] {
  --accent:        #60B0C8;
  --accent-hover:  #50A0B8;
  --accent-subtle: rgba(96, 176, 200, 0.14);
  --accent-border: rgba(96, 176, 200, 0.28);
}
[data-theme="dark"][data-palette="dusk"] {
  --accent:        #A888D8;
  --accent-hover:  #9878C8;
  --accent-subtle: rgba(168, 136, 216, 0.14);
  --accent-border: rgba(168, 136, 216, 0.28);
}

/* ── Dark Mode — deep forest ──────────────────────────── */
[data-theme="dark"] {
  --bg-page:           #161A14;
  --bg-surface:        #1E2319;
  --bg-surface-raised: #252B20;
  --bg-surface-sunken: #121510;
  --bg-sidebar:        #1B1F16;

  --text-primary:      #EDE8DE;
  --text-secondary:    #A8988A;
  --text-tertiary:     #6E6358;
  --text-placeholder:  #534B42;

  --border-default:    rgba(255, 255, 255, 0.09);
  --border-subtle:     rgba(255, 255, 255, 0.05);
  --border-emphasis:   rgba(255, 255, 255, 0.15);

  --teacher-surface:   #222B23;
  --teacher-border:    rgba(94, 140, 106, 0.2);
  --student-surface:   #4D7558;

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-sm:  0 2px 6px rgba(0, 0, 0, 0.30);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.40);
  --shadow-lg:  0 12px 40px rgba(0, 0, 0, 0.50);
  --shadow-xl:  0 24px 64px rgba(0, 0, 0, 0.60);

  --accent:         #7AAE88;
  --accent-hover:   #6A9E78;
  --accent-subtle:  rgba(122, 174, 136, 0.14);
  --accent-border:  rgba(122, 174, 136, 0.28);

  --success-bg:  rgba(94, 140, 106, 0.18);
  --warning-bg:  rgba(184, 134, 42, 0.16);
  --error-bg:    rgba(168, 81, 74, 0.16);
}