/**
 * Junipa Design System - Design Tokens
 * Source of truth for all design tokens across junipa and junipa-organisations
 *
 * Philosophy: Linear-inspired, minimal sharp
 * Max border-radius: 4px (3px nav items, 2px tight)
 * Font sizes: 10-12px compact scale
 * Grid: 4px spacing increments
 */

:root {
  /* ========================================
   * Light Mode - "Clean Slate"
   * ======================================== */

  /* Base Surfaces */
  --surface-0: #FFFFFF;
  --surface-1: #F6F8FA;
  --surface-2: #FFFFFF;
  --surface-3: #F3F4F6;

  /* Borders */
  --border-subtle: #E5E7EB;
  --border-default: #D1D5DB;
  --border-emphasis: #9CA3AF;

  /* Text Hierarchy */
  --text-primary: #1F2937;
  --text-secondary: #4B5563;
  --text-muted: #9CA3AF;
  --text-link: #2563EB;

  /* CTA Colors
     NOTE: --cta-primary is the ORANGE brand accent (upload progress, journal
     document CTAs, group membership highlights). It is NOT the primary button
     colour — .btn-primary is blue (--bs-primary). Do not wire --cta-primary
     into .btn-primary. */
  --cta-primary: #EA580C;
  --cta-primary-hover: #F97316;
  --cta-primary-text: #111827;
  --cta-secondary: #0284C7;
  --cta-secondary-hover: #0EA5E9;

  /* Primary button (blue) hover/active steps — Bootstrap's shade-10%/20% */
  --btn-primary-hover-bg: #0B5ED7;
  --btn-primary-active-bg: #0A58CA;

  /* Brand */
  --brand-orange: #FF6813;

  /* Status Colors */
  --status-success: #16A34A;
  --status-warning: #CA8A04;
  --status-error: #DC2626;
  --status-info: #2563EB;

  /* Focus Ring */
  --focus-ring: rgba(37, 99, 235, 0.3);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-glow: none;

  /* Semantic Component Tokens */
  --content-bg: var(--surface-0);
  --card-bg: var(--surface-2);
  --card-border: var(--border-subtle);
  --table-header-bg: var(--surface-1);
  --table-border: var(--border-subtle);
  --hover-bg: var(--surface-3);
  --primary-color: var(--cta-primary);
  --danger-color: var(--status-error);
  --selection-color: var(--cta-primary);
  --selection-bg: rgba(234, 88, 12, 0.08);

  /* Sidebar */
  --sidebar-bg: var(--surface-1);
  --sidebar-active: var(--cta-primary);
  --sidebar-active-bg: rgba(234, 88, 12, 0.08);
  --sidebar-text: var(--text-secondary);
  --sidebar-text-hover: var(--text-primary);
  --sidebar-border: var(--border-subtle);

  /* Calendar class chip — the shared surface for a timetabled class wherever
   * the student calendar renders one (day-view cards, week and month overlay
   * chips), so the three views read as one family. Deliberately a step darker
   * than --surface-3: at 3% off white a chip dissolves into the grid, while
   * --bs-secondary-bg (#E9ECEF) reads as a heavy box. Chips are borderless and
   * carry a soft shadow; hover only deepens that shadow.
   * The plus affordance sits a hair LIGHTER than the chip with its own border
   * so it reads as part of the card rather than a floating control. */
  --calendar-chip-bg: #EEF0F2;
  --calendar-chip-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  --calendar-chip-shadow-hover: 0 2px 6px rgba(15, 23, 42, 0.16);
  --calendar-chip-add-bg: #F6F7F8;
  --calendar-chip-add-border: #D6DADE;

  /* CLASS surface (timetabled lesson) — a soft TEAL tint, replacing the neutral
   * grey that read as "disabled" next to the saturated blue adjustment cards.
   * Why teal: every other hue on this calendar is already spoken for — blue is
   * the adjustment/evidence primary, amber a case note, red a significant
   * event, and orange is the reserved brand accent (--cta-primary). Teal is the
   * only supporting hue that carries no status meaning here, so a class reads
   * as a different KIND of thing rather than a different STATE of one.
   * It is a tint, not a fill: classes are the calm background layer the day is
   * scanned against, so they must never out-shout the recorded activity that
   * sits on top of them. Text is a deep teal-slate, not black, so the card
   * feels like one material (measured ~9.7:1 on the tint — well past AA). */
  --calendar-chip-class-bg: #E2F1F0;
  --calendar-chip-class-text: #10363A;
  --calendar-chip-class-muted: #4A6F72;
  /* The hover plus, tinted to the card's own family rather than solid black. */
  --calendar-chip-class-add-bg: #EDF7F6;
  --calendar-chip-class-add-border: #BBD9D7;

  /* ========================================
   * Typography
   * ======================================== */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Font Sizes (compact scale) */
  --font-size-xs: 10px;
  --font-size-sm: 11px;
  --font-size-base: 12px;
  --font-size-md: 13px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ========================================
   * Spacing (4px grid)
   * ======================================== */
  --space-0: 0;
  --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;

  /* ========================================
   * Control Heights
   * ======================================== */
  --control-height-sm: 30px;

  /* ========================================
   * Border Radius
   * ======================================== */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* ========================================
   * Transitions
   * ======================================== */
  --transition-fast: 100ms ease;
  --transition-base: 150ms ease;
  --transition-slow: 300ms ease;

  /* ========================================
   * Z-Index Scale
   * ======================================== */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-popover: 400;
  --z-contextual-popover: 1125;
  /* Toasts are the top-most ephemeral layer — they must float ABOVE full-screen
     modals (e.g. the report Data-map modal at z-index 2000) so confirmations
     like "File uploaded successfully" are visible over an open modal. */
  --z-toast: 2100;
}

/* ========================================
 * Dark Mode - "Hyperwave"
 * Support both data-theme and data-bs-theme
 * ======================================== */
[data-theme="dark"],
[data-bs-theme="dark"] {
  /* Brand */
  --brand-orange: #FF8A46;

  /* Base Surfaces */
  --surface-0: #07090F;
  --surface-1: #0D1117;
  --surface-2: #161B22;
  --surface-3: #21262D;

  /* Admin page surface — near-black "single plane".
   * Admin pages render their cards/sections directly on this so there is no
   * distinct Surface-1/Surface-2 panel colour standing proud of the page;
   * cards are defined by a hairline border instead of a lighter fill.
   * Used by the admin shell content area and every first-level admin page. */
  --admin-page-bg: #050505;
  --admin-card-bg: var(--admin-page-bg);
  --admin-card-border: rgba(48, 54, 61, 0.45);
  --admin-card-header-border: rgba(48, 54, 61, 0.30);

  /* Admin tables, filter bars and segmented "choosers" — all on the same
   * near-black plane. Table body is transparent (shows the page); the header
   * gets the faintest lift so it still reads as a header; row hover is a hair
   * of white, never grey. Borders are a touch stronger than card borders so
   * dense data still has structure. */
  --admin-table-header-bg: #0A0C10;
  /* Row hover = pitch black (the Years-page reference standard); against the
     #050505 plane the hovered row sinks a touch darker, never lifts to grey. */
  --admin-table-row-hover: #000000;
  --admin-table-border: rgba(48, 54, 61, 0.55);
  --admin-filter-bg: #0A0C10;            /* filter bars + search/segment wells */
  --admin-chooser-bg: #0A0C10;           /* inactive segment / pill background */
  --admin-chooser-active-bg: #161B22;    /* selected segment — subtle lift */
  --admin-chooser-border: rgba(48, 54, 61, 0.55);
  /* Form inputs — only a hair lighter than the near-black page so the field
   * reads as recessed, never a light-grey slab. */
  --admin-input-bg: #0E1116;
  --admin-input-border: rgba(48, 54, 61, 0.65);
  --admin-input-focus-bg: #12161C;

  /* Borders (subtle glow effect) */
  --border-subtle: rgba(48, 54, 61, 0.8);
  --border-default: rgba(48, 54, 61, 1);
  --border-emphasis: rgba(139, 148, 158, 0.4);

  /* Text Hierarchy */
  --text-primary: #E6EDF3;
  --text-secondary: #8B949E;
  --text-muted: #6E7681;
  --text-link: #58A6FF;

  /* CTA Colors — orange brand accent only, never .btn-primary (see light theme) */
  --cta-primary: #FF6B35;
  --cta-primary-hover: #FF8A5B;
  --cta-primary-text: #111827;
  --cta-secondary: #38BDF8;
  --cta-secondary-hover: #7DD3FC;

  /* Primary button (blue) hover/active steps — lifted for dark surfaces */
  --btn-primary-hover-bg: #3D8BFD;
  --btn-primary-active-bg: #5A9DFE;

  /* Status Colors */
  --status-success: #3FB950;
  --status-warning: #D29922;
  --status-error: #F85149;
  --status-info: #58A6FF;

  /* Focus Ring */
  --focus-ring: rgba(56, 189, 248, 0.4);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px rgba(56, 189, 248, 0.1);

  /* Semantic Component Tokens (Dark) */
  --content-bg: var(--surface-0);
  --card-bg: var(--surface-2);
  --card-border: rgba(48, 54, 61, 0.2);
  --table-header-bg: var(--surface-1);
  --table-border: var(--border-subtle);
  --hover-bg: var(--surface-3);
  --primary-color: var(--cta-primary);
  --danger-color: var(--status-error);
  --selection-color: var(--cta-primary);
  --selection-bg: rgba(255, 107, 53, 0.12);

  /* Sidebar (Dark) */
  --sidebar-bg: var(--surface-1);
  --sidebar-active: var(--cta-primary);
  --sidebar-active-bg: rgba(255, 107, 53, 0.12);
  --sidebar-text: var(--text-secondary);
  --sidebar-text-hover: var(--text-primary);
  --sidebar-border: var(--border-subtle);

  /* Calendar class chip (Dark) — same relationship as light: one visible step
   * off the canvas, borderless, shadow-only, with the plus a step lighter. */
  --calendar-chip-bg: #262C34;
  --calendar-chip-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  --calendar-chip-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.6);
  --calendar-chip-add-bg: #2E353E;
  --calendar-chip-add-border: #3D454F;

  /* CLASS surface (Dark) — the same teal identity inverted rather than
   * reused: on a dark canvas the light tint would glare, so the surface
   * becomes a desaturated teal-slate that is one clear step off the grid,
   * with a light teal text that stays comfortably above AA (~9.4:1). The
   * hue survives the theme flip so a class is recognisably the same object
   * in both, which is the point of the token. */
  --calendar-chip-class-bg: #1E3335;
  --calendar-chip-class-text: #CFE7E5;
  --calendar-chip-class-muted: #8FB3B2;
  --calendar-chip-class-add-bg: #274044;
  --calendar-chip-class-add-border: #3A5C5E;
}