/* Theme tokens — HOMEROOM family.
   Ported from the Homeroom app's color palette (session 36–37). Loaded after
   tokens-base.css (shared tokens + the bare-:root default-paint alias). Each
   block here defines a `:root[data-theme="<key>"]` variant; the shared tokens
   come from tokens-base.css. See tokens-base.css for the full split rationale +
   add-a-theme steps.

   The data-theme keys here carry NO 'homeroom-' prefix (the picker already
   groups them under a 'Homeroom' optgroup): pink, orange, green, blue,
   light-pink, purple, night. None collide with the jackson-family keys.

   The light Homeroom themes share one espresso-brown sidebar (faithful to
   Homeroom's shared --secondary brown) and swap only --accent + the top-nav
   color per theme. 'night' is the all-dark exception (no brown chrome). */

/* ─── Homeroom Pink (LIGHT content + WINE-PINK top nav + BROWN sidebar) ────────
   Ported from the Homeroom app's "pink" theme. Same scope-override trick as
   Tuxedo, but with two distinct chrome colors instead of one. Page main area
   is light. Top nav is deep wine, rail is espresso brown. Bright pink is the
   accent throughout (no green here). This block is the import template for the
   rest of the Homeroom palette below — each sibling keeps the brown rail and
   swaps only --accent + the wine top-nav for its own primary hue.
   Homeroom source: --primary-bright #e2366a, --primary #ab2753, --secondary
   #6a4c2e (brown). */
:root[data-theme="pink"] {
  --bg:        #f4f4f4;   /* neutral light page */
  --surface:   #ffffff;   /* card */
  --surface-2: #ebebeb;   /* nested */

  --ink:       #202020;
  --ink-2:     #555555;
  --ink-3:     #828282;
  --ink-disabled: #c4c4c4;

  --border:        #dedede;
  --border-strong: #c0c0c0;

  --accent:        #d44175;   /* bright pink — pops on the light page AND on the deep-wine top-nav */
  --accent-strong: #b7335f;
  --accent-soft:   rgba(212, 65, 117, 0.10);
  --presence-online-c: #6f8c33;

  --hover:    rgba(0, 0, 0, 0.04);
  --active:   rgba(0, 0, 0, 0.07);
  --focus:    rgba(212, 65, 117, 0.45);

  --status-active:    #d44175;
  --status-on-hold:   #6a7b85;
  --status-complete:  #4d8a9c;
  --status-archived:  #8b9aa1;

  --danger:       #b73d3d;
  --danger-soft:  rgba(183, 61, 61, 0.10);
  --warning:      #a67833;
  --warning-soft: rgba(166, 120, 51, 0.12);

  --shadow:    0 4px 12px rgba(0, 0, 0, 0.10);

  --color-scheme:  light;
  --picker-invert: 0;

  --surface-hero: #241810;   /* deep espresso hero matches the new darker rail */
  --ink-hero:     #f5efe7;
  --surface-inset: #ffffff;
  --ink-inset:     #202020;

}

/* ─── Homeroom Orange (LIGHT content + BURNT-ORANGE top nav + BROWN sidebar) ──
   Homeroom source: --primary-bright #F28C28, --primary #C76414, --secondary
   #6A4C2E. Burnt-orange wine-equivalent top nav over the shared espresso rail;
   orange is the accent throughout. */
:root[data-theme="orange"] {
  --bg:        #f4f4f4;
  --surface:   #ffffff;
  --surface-2: #ebebeb;

  --ink:       #202020;
  --ink-2:     #555555;
  --ink-3:     #828282;
  --ink-disabled: #c4c4c4;

  --border:        #dedede;
  --border-strong: #c0c0c0;

  --accent:        #c76414;   /* burnt orange — Homeroom --primary, dark enough for white badge text */
  --accent-strong: #a4520e;
  --accent-soft:   rgba(199, 100, 20, 0.12);
  --presence-online-c: #6f8c33;

  --hover:    rgba(0, 0, 0, 0.04);
  --active:   rgba(0, 0, 0, 0.07);
  --focus:    rgba(199, 100, 20, 0.45);

  --status-active:    #c76414;
  --status-on-hold:   #6a7b85;
  --status-complete:  #4d8a9c;
  --status-archived:  #8b9aa1;

  --danger:       #b73d3d;
  --danger-soft:  rgba(183, 61, 61, 0.10);
  --warning:      #a67833;
  --warning-soft: rgba(166, 120, 51, 0.12);

  --shadow:    0 4px 12px rgba(0, 0, 0, 0.10);

  --color-scheme:  light;
  --picker-invert: 0;

  --surface-hero: #241810;
  --ink-hero:     #f5efe7;
  --surface-inset: #ffffff;
  --ink-inset:     #202020;

}

/* ─── Homeroom Green (LIGHT content + OLIVE-GREEN top nav + BROWN sidebar) ────
   Homeroom source: --primary-bright #C9D96F, --primary #98B44D, --secondary
   #6A4C2E. NOTE: Homeroom's olive primary is too light for white text, so the
   accent is deepened a step (#7c9a39) while keeping the olive character —
   mirrors how pink's --accent was tuned from --primary-bright for contrast. */
:root[data-theme="green"] {
  --bg:        #f4f4f4;
  --surface:   #ffffff;
  --surface-2: #ebebeb;

  --ink:       #202020;
  --ink-2:     #555555;
  --ink-3:     #828282;
  --ink-disabled: #c4c4c4;

  --border:        #dedede;
  --border-strong: #c0c0c0;

  --accent:        #6f8c33;   /* deepened olive — readable white badge text */
  --accent-strong: #5c7529;
  --accent-soft:   rgba(111, 140, 51, 0.12);
  --presence-online-c: #6f8c33;

  --hover:    rgba(0, 0, 0, 0.04);
  --active:   rgba(0, 0, 0, 0.07);
  --focus:    rgba(111, 140, 51, 0.45);

  --status-active:    #6f8c33;
  --status-on-hold:   #6a7b85;
  --status-complete:  #4d8a9c;
  --status-archived:  #8b9aa1;

  --danger:       #b73d3d;
  --danger-soft:  rgba(183, 61, 61, 0.10);
  --warning:      #a67833;
  --warning-soft: rgba(166, 120, 51, 0.12);

  --shadow:    0 4px 12px rgba(0, 0, 0, 0.10);

  --color-scheme:  light;
  --picker-invert: 0;

  --surface-hero: #241810;
  --ink-hero:     #f5efe7;
  --surface-inset: #ffffff;
  --ink-inset:     #202020;

}

/* ─── Homeroom Blue (LIGHT content + DEEP-BLUE top nav + BROWN sidebar) ───────
   Homeroom source: --primary-bright #3C6EBF, --primary #1F3B82, --secondary
   #6A4C2E. Deep-blue wine-equivalent top nav over the shared espresso rail. */
:root[data-theme="blue"] {
  --bg:        #f4f4f4;
  --surface:   #ffffff;
  --surface-2: #ebebeb;

  --ink:       #202020;
  --ink-2:     #555555;
  --ink-3:     #828282;
  --ink-disabled: #c4c4c4;

  --border:        #dedede;
  --border-strong: #c0c0c0;

  --accent:        #2e57a8;   /* between Homeroom primary and primary-bright — pops on light AND on the deep-blue nav */
  --accent-strong: #24468a;
  --accent-soft:   rgba(46, 87, 168, 0.12);
  --presence-online-c: #6f8c33;

  --hover:    rgba(0, 0, 0, 0.04);
  --active:   rgba(0, 0, 0, 0.07);
  --focus:    rgba(46, 87, 168, 0.45);

  --status-active:    #2e57a8;
  --status-on-hold:   #6a7b85;
  --status-complete:  #4d8a9c;
  --status-archived:  #8b9aa1;

  --danger:       #b73d3d;
  --danger-soft:  rgba(183, 61, 61, 0.10);
  --warning:      #a67833;
  --warning-soft: rgba(166, 120, 51, 0.12);

  --shadow:    0 4px 12px rgba(0, 0, 0, 0.10);

  --color-scheme:  light;
  --picker-invert: 0;

  --surface-hero: #241810;
  --ink-hero:     #f5efe7;
  --surface-inset: #ffffff;
  --ink-inset:     #202020;

}

/* ─── Homeroom Light Pink (LIGHT content + SOFT-ROSE top nav + BROWN sidebar) ─
   Homeroom source: --primary-bright #F5A3C6, --primary #D7709C, --secondary
   #5C5E42 (olive-brown). Softer rose than Homeroom Pink — the rose primary is
   deepened (#c25584) for white-text contrast. */
:root[data-theme="light-pink"] {
  --bg:        #f4f4f4;
  --surface:   #ffffff;
  --surface-2: #ebebeb;

  --ink:       #202020;
  --ink-2:     #555555;
  --ink-3:     #828282;
  --ink-disabled: #c4c4c4;

  --border:        #dedede;
  --border-strong: #c0c0c0;

  --accent:        #c25584;   /* deepened soft rose — readable white badge text */
  --accent-strong: #a8456f;
  --accent-soft:   rgba(194, 85, 132, 0.12);
  --presence-online-c: #6f8c33;

  --hover:    rgba(0, 0, 0, 0.04);
  --active:   rgba(0, 0, 0, 0.07);
  --focus:    rgba(194, 85, 132, 0.45);

  --status-active:    #c25584;
  --status-on-hold:   #6a7b85;
  --status-complete:  #4d8a9c;
  --status-archived:  #8b9aa1;

  --danger:       #b73d3d;
  --danger-soft:  rgba(183, 61, 61, 0.10);
  --warning:      #a67833;
  --warning-soft: rgba(166, 120, 51, 0.12);

  --shadow:    0 4px 12px rgba(0, 0, 0, 0.10);

  --color-scheme:  light;
  --picker-invert: 0;

  --surface-hero: #241810;
  --ink-hero:     #f5efe7;
  --surface-inset: #ffffff;
  --ink-inset:     #202020;

}

/* ─── Homeroom Purple (LIGHT content + PLUM top nav + BROWN sidebar) ──────────
   Homeroom source: --primary-bright #C55AA7, --primary #8D3F86, --secondary
   #6A4C2E. Plum/magenta-purple accent over the shared espresso rail. */
:root[data-theme="purple"] {
  --bg:        #f4f4f4;
  --surface:   #ffffff;
  --surface-2: #ebebeb;

  --ink:       #202020;
  --ink-2:     #555555;
  --ink-3:     #828282;
  --ink-disabled: #c4c4c4;

  --border:        #dedede;
  --border-strong: #c0c0c0;

  --accent:        #8d3f86;   /* plum — Homeroom --primary, dark enough for white text */
  --accent-strong: #74336e;
  --accent-soft:   rgba(141, 63, 134, 0.12);
  --presence-online-c: #6f8c33;

  --hover:    rgba(0, 0, 0, 0.04);
  --active:   rgba(0, 0, 0, 0.07);
  --focus:    rgba(141, 63, 134, 0.45);

  --status-active:    #8d3f86;
  --status-on-hold:   #6a7b85;
  --status-complete:  #4d8a9c;
  --status-archived:  #8b9aa1;

  --danger:       #b73d3d;
  --danger-soft:  rgba(183, 61, 61, 0.10);
  --warning:      #a67833;
  --warning-soft: rgba(166, 120, 51, 0.12);

  --shadow:    0 4px 12px rgba(0, 0, 0, 0.10);

  --color-scheme:  light;
  --picker-invert: 0;

  --surface-hero: #241810;
  --ink-hero:     #f5efe7;
  --surface-inset: #ffffff;
  --ink-inset:     #202020;

}

/* ─── Homeroom Night (DARK content + DARK chrome) ────────────────────────────
   Homeroom source: --primary-bright #202020, --primary #464646, --dark #050505,
   --background-light #060606, --background-pop #1A1A1A, --text-dark #C8C8C8.
   This is Homeroom's all-dark theme — near-black surfaces, light-grey ink, a
   muted grey accent. The ONLY Homeroom import that drops the brown rail (the
   source has no brown chrome in night mode). */
:root[data-theme="night"] {
  --bg:        #060606;   /* Homeroom --background-light */
  --surface:   #1a1a1a;   /* Homeroom --background-pop */
  --surface-2: #242424;

  --ink:       #e9e9e9;   /* Homeroom --text-light */
  --ink-2:     #c8c8c8;   /* Homeroom --text-dark (in night it's the lighter grey) */
  --ink-3:     #8a8a8a;
  --ink-disabled: #4a4a4a;

  --border:        #2a2a2a;
  --border-strong: #3a3a3a;

  --accent:        #6f8c33;   /* Homeroom night has a flat grey primary, which can't be the only
                                 action color (grey buttons on grey read dead). Route the accent
                                 through a readable muted olive-green that fits the Homeroom palette
                                 — same move OLED makes to stay legible on near-black. */
  --accent-strong: #7ea03a;
  --accent-soft:   rgba(111, 140, 51, 0.18);

  --hover:    rgba(255, 255, 255, 0.04);
  --active:   rgba(255, 255, 255, 0.07);
  --focus:    rgba(111, 140, 51, 0.50);

  --status-active:    #6f8c33;
  --status-on-hold:   #7c8f99;
  --status-complete:  #4a8fb5;
  --status-archived:  #4a5d66;

  --danger:       #d65a5a;
  --danger-soft:  rgba(214, 90, 90, 0.16);
  --warning:      #d4a93f;
  --warning-soft: rgba(212, 169, 63, 0.16);

  --shadow:    0 4px 12px rgba(0, 0, 0, 0.60);

  --color-scheme:  dark;
  --picker-invert: 0.6;

  --surface-hero: #000000;
  --ink-hero:     #e9e9e9;
  --surface-inset: #1a1a1a;
  --ink-inset:     #e9e9e9;

}

/* Homeroom Pink two-color chrome scope overrides — same trick as Tuxedo, but
   with brown rail and wine-pink top nav. Light content area inherits the parent
   theme tokens; rail and top-nav subtrees get dark inverted tokens scoped
   to their colors. */
:root[data-theme="pink"] .nav-rail {
  --bg:            #241810;   /* deep espresso-brown sidebar */
  --surface:       #352617;   /* lifted (new-btn, count badges) */
  --surface-2:     #453420;   /* further lifted */
  --ink:           #f5efe7;   /* warm white */
  --ink-2:         #d6c4a8;
  --ink-3:         #a08868;
  --ink-disabled:  #6a4c2e;
  --border:        #1a120a;
  --border-strong: #0e0a05;
  --hover:         rgba(255, 255, 255, 0.06);
  --active:        rgba(255, 255, 255, 0.10);
  --shadow:        0 4px 12px rgba(0, 0, 0, 0.50);
  --color-scheme:  dark;
  --picker-invert: 0.6;

}
:root[data-theme="pink"] .nav-top {
  --bg:            #5e1129;   /* deep wine — darker than the bright --accent so accent badges/pills pop on it */
  --surface:       #5e1129;
  --surface-2:     #4a0d20;   /* darker still for lifted (avatar bg, hover) */
  --ink:           #ffffff;
  --ink-2:         #e8b8c5;
  --ink-3:         #c896a4;
  --ink-disabled:  #3a0816;
  --border:        #4a0d20;
  --border-strong: #3a0816;
  --hover:         rgba(255, 255, 255, 0.10);
  --active:        rgba(255, 255, 255, 0.15);
  --color-scheme:  dark;
  --picker-invert: 0.6;

}

/* Homeroom sibling chrome — the rest of the Homeroom light palette shares the
   same espresso-brown sidebar (faithful to Homeroom's shared --secondary brown)
   and swaps only the top-nav color for each theme's deepened primary. The rail
   block below is identical to Homeroom Pink's; the .nav-top blocks differ. */
:root[data-theme="orange"] .nav-rail,
:root[data-theme="green"] .nav-rail,
:root[data-theme="blue"] .nav-rail,
:root[data-theme="light-pink"] .nav-rail,
:root[data-theme="purple"] .nav-rail {
  --bg:            #241810;   /* deep espresso-brown sidebar */
  --surface:       #352617;
  --surface-2:     #453420;
  --ink:           #f5efe7;
  --ink-2:         #d6c4a8;
  --ink-3:         #a08868;
  --ink-disabled:  #6a4c2e;
  --border:        #1a120a;
  --border-strong: #0e0a05;
  --hover:         rgba(255, 255, 255, 0.06);
  --active:        rgba(255, 255, 255, 0.10);
  --shadow:        0 4px 12px rgba(0, 0, 0, 0.50);
  --color-scheme:  dark;
  --picker-invert: 0.6;

}
:root[data-theme="orange"] .nav-top {
  --bg:            #6e3208;   /* deep burnt-orange — darker than --accent so badges pop */
  --surface:       #6e3208;
  --surface-2:     #582806;
  --ink:           #ffffff;
  --ink-2:         #e8c4a8;
  --ink-3:         #c8a484;
  --ink-disabled:  #3a1c04;
  --border:        #582806;
  --border-strong: #3a1c04;
  --hover:         rgba(255, 255, 255, 0.10);
  --active:        rgba(255, 255, 255, 0.15);
  --color-scheme:  dark;
  --picker-invert: 0.6;

}
:root[data-theme="green"] .nav-top {
  --bg:            #3e4f1c;   /* deep olive — darker than --accent so badges pop */
  --surface:       #3e4f1c;
  --surface-2:     #324015;
  --ink:           #ffffff;
  --ink-2:         #cdd8b0;
  --ink-3:         #a6b488;
  --ink-disabled:  #232d0e;
  --border:        #324015;
  --border-strong: #232d0e;
  --hover:         rgba(255, 255, 255, 0.10);
  --active:        rgba(255, 255, 255, 0.15);
  --color-scheme:  dark;
  --picker-invert: 0.6;

}
:root[data-theme="blue"] .nav-top {
  --bg:            #1f3b82;   /* deep blue — Homeroom --primary, darker than --accent so badges pop */
  --surface:       #1f3b82;
  --surface-2:     #182f6a;
  --ink:           #ffffff;
  --ink-2:         #b8c6e8;
  --ink-3:         #94a4c8;
  --ink-disabled:  #11204a;
  --border:        #182f6a;
  --border-strong: #11204a;
  --hover:         rgba(255, 255, 255, 0.10);
  --active:        rgba(255, 255, 255, 0.15);
  --color-scheme:  dark;
  --picker-invert: 0.6;

}
:root[data-theme="light-pink"] .nav-top {
  --bg:            #8a3a5e;   /* deep rose — darker than --accent so badges pop */
  --surface:       #8a3a5e;
  --surface-2:     #72304d;
  --ink:           #ffffff;
  --ink-2:         #e8bccd;
  --ink-3:         #c89aac;
  --ink-disabled:  #4f1f34;
  --border:        #72304d;
  --border-strong: #4f1f34;
  --hover:         rgba(255, 255, 255, 0.10);
  --active:        rgba(255, 255, 255, 0.15);
  --color-scheme:  dark;
  --picker-invert: 0.6;

}
:root[data-theme="purple"] .nav-top {
  --bg:            #5a2855;   /* deep plum — darker than --accent so badges pop */
  --surface:       #5a2855;
  --surface-2:     #4a2146;
  --ink:           #ffffff;
  --ink-2:         #ddbcd9;
  --ink-3:         #bc9ab8;
  --ink-disabled:  #361433;
  --border:        #4a2146;
  --border-strong: #361433;
  --hover:         rgba(255, 255, 255, 0.10);
  --active:        rgba(255, 255, 255, 0.15);
  --color-scheme:  dark;
  --picker-invert: 0.6;

}