/* ============================================================
   tokens.css — Unified Design Token System
   Single source of truth for both Parent and Teacher portals.
   Portal-specific overrides live in parent.css / teacher.css.
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     COLOR PRIMITIVES
     ---------------------------------------------------------- */

  /* Blue */
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;

  /* Green */
  --green-50:  #ecfdf5;
  --green-100: #d1fae5;
  --green-200: #a7f3d0;
  --green-500: #10b981;
  --green-600: #059669;
  --green-700: #047857;

  /* Amber */
  --amber-50:  #fffbeb;
  --amber-100: #fef3c7;
  --amber-200: #fde68a;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-700: #b45309;

  /* Red */
  --red-50:  #fef2f2;
  --red-100: #fee2e2;
  --red-200: #fecaca;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;

  /* Sky */
  --sky-50:  #f0f9ff;
  --sky-100: #e0f2fe;
  --sky-200: #bae6fd;
  --sky-500: #0ea5e9;
  --sky-600: #0284c7;

  /* Orange */
  --orange-100: #ffedd5;
  --orange-500: #f97316;
  --orange-600: #ea580c;

  /* Violet */
  --violet-100: #ede9fe;
  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;

  /* Yellow */
  --yellow-100: #fef9c3;
  --yellow-800: #854d0e;

  /* Slate */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  /* ----------------------------------------------------------
     SEMANTIC TOKENS
     ---------------------------------------------------------- */

  /* Primary (blue) */
  --color-primary:        var(--blue-500);
  --color-primary-hover:  var(--blue-600);
  --color-primary-active: var(--blue-700);
  --color-primary-light:  var(--blue-50);
  --color-primary-border: var(--blue-200);
  --color-on-primary:     #ffffff;

  /* Secondary (green) */
  --color-secondary:       var(--green-500);
  --color-secondary-hover: var(--green-600);
  --color-secondary-light: var(--green-50);
  --color-on-secondary:    #ffffff;

  /* Status */
  --color-success:        var(--green-500);
  --color-success-bg:     var(--green-100);
  --color-success-text:   var(--green-700);

  --color-warning:        var(--amber-500);
  --color-warning-bg:     var(--amber-100);
  --color-warning-text:   var(--amber-700);

  --color-danger:         var(--red-500);
  --color-danger-bg:      var(--red-100);
  --color-danger-text:    var(--red-700);

  --color-info:           var(--sky-500);
  --color-info-bg:        var(--sky-100);
  --color-info-text:      var(--sky-600);

  --color-orange:         var(--orange-500);
  --color-orange-bg:      var(--orange-100);
  --color-orange-text:    var(--orange-600);

  --color-violet:         var(--violet-500);
  --color-violet-bg:      var(--violet-100);
  --color-violet-text:    var(--violet-600);

  --color-yellow-bg:      var(--yellow-100);
  --color-yellow-text:    var(--yellow-800);

  /* Additional semantic tokens */
  --color-line:           #06c755;
  --color-line-hover:     #05b04b;
  --bg-hover:             var(--slate-50);
  --color-warning-dark:   var(--amber-700);
  --color-success-dark:   var(--green-700);
  --color-danger-dark:    var(--red-700);
  --color-info-dark:      var(--sky-600);

  /* Chart palette */
  --chart-1: #3b82f6;
  --chart-2: #22c55e;
  --chart-3: #f59e0b;
  --chart-4: #ef4444;
  --chart-5: #8b5cf6;
  --chart-6: #06b6d4;
  --chart-7: #ec4899;
  --chart-8: #f97316;

  /* Backgrounds */
  --bg-body:     var(--slate-50);
  --bg-card:     #ffffff;
  --bg-elevated: #ffffff;
  --bg-muted:    var(--slate-100);

  /* Text */
  --text-primary:   var(--slate-800);
  --text-secondary: var(--slate-500);
  --text-muted:     var(--slate-400);

  /* Borders */
  --border-color: var(--slate-200);
  --border-light: var(--slate-100);

  /* ----------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------- */

  --font-family: 'Noto Sans TC', system-ui, -apple-system, sans-serif;

  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.875rem;  /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg:   1.125rem;  /* 18px */
  --font-size-xl:   1.25rem;   /* 20px */
  --font-size-2xl:  1.5rem;    /* 24px */
  --font-size-3xl:  1.875rem;  /* 30px */

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:   1.25;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.75;

  /* ----------------------------------------------------------
     SPACING  (4px base unit)
     ---------------------------------------------------------- */

  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */

  /* ----------------------------------------------------------
     BORDER RADIUS
     ---------------------------------------------------------- */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     SHADOWS
     ---------------------------------------------------------- */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* ----------------------------------------------------------
     Z-INDEX SCALE
     ---------------------------------------------------------- */

  --z-dropdown: 1000;
  --z-sticky:   1020;
  --z-overlay:  1030;
  --z-modal:    1040;
  --z-popover:  1050;
  --z-toast:    1060;
  --z-tooltip:  1070;

  /* ----------------------------------------------------------
     MOTION TOKENS
     ---------------------------------------------------------- */

  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;

  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ----------------------------------------------------------
     FOCUS RINGS
     ---------------------------------------------------------- */

  --focus-ring:        0 0 0 3px rgba(59, 130, 246, 0.4);   /* blue-500 */
  --focus-ring-danger: 0 0 0 3px rgba(239, 68, 68, 0.4);    /* red-500  */

}

/* === Dark Mode === */
html.dark-theme {
  --bg-body: #0f172a;
  --bg-card: #1e293b;
  --bg-elevated: #334155;
  --bg-muted: #1e293b;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --border-color: #334155;
  --border-light: #1e293b;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
  --color-primary: #60a5fa;
  --color-primary-hover: #93c5fd;
  --color-primary-light: rgba(59, 130, 246, 0.15);
  --color-primary-border: rgba(59, 130, 246, 0.3);
  --color-success-bg: rgba(16, 185, 129, 0.15);
  --color-success-text: #6ee7b7;
  /* UIFIX-93: secondary-light 補暗色（家長 home icon 磚等淺綠底） */
  --color-secondary-light: rgba(16, 185, 129, 0.15);
  --color-warning-bg: rgba(245, 158, 11, 0.15);
  --color-warning-text: #fcd34d;
  --color-danger-bg: rgba(239, 68, 68, 0.15);
  --color-danger-text: #fca5a5;
  --color-info-bg: rgba(14, 165, 233, 0.15);
  --color-info-text: #7dd3fc;
  --bg-hover: rgba(255, 255, 255, 0.05);
  --color-line: #34d27b;
  --color-line-hover: #2ab868;
  --color-orange: #fb923c;
  --color-orange-bg: rgba(249, 115, 22, 0.15);
  --color-orange-text: #fdba74;
  --color-violet: #a78bfa;
  --color-violet-bg: rgba(139, 92, 246, 0.15);
  --color-violet-text: #c4b5fd;
  --color-yellow-bg: rgba(245, 158, 11, 0.15);
  --color-yellow-text: #fde68a;
  --chart-1: #60a5fa;
  --chart-2: #4ade80;
  --chart-3: #fbbf24;
  --chart-4: #f87171;
  --chart-5: #a78bfa;
  --chart-6: #22d3ee;
  --chart-7: #f472b6;
  --chart-8: #fb923c;
}

/* ----------------------------------------------------------
   REDUCED MOTION — disable all transitions/animations
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0ms;
    --duration-normal: 0ms;
    --duration-slow:   0ms;
  }
}

/* === Skip Link (Accessibility) === */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--color-primary);
  color: #ffffff;
  padding: 0.5rem 1rem;
  z-index: 10000;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius-md) 0;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
  outline: none;
}

/* === Touch Optimization === */
a, button, input, select, textarea,
[role="button"], [role="tab"],
.nav-btn, .nav-item, .nav-group-toggle {
  touch-action: manipulation;
}

/* === Form Accessibility === */
.form-label.required::after,
.form-label-app.required::after,
label.required::after {
  content: " *";
  color: var(--color-danger);
  font-weight: 700;
}

/* Visually hidden but accessible label */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Error message near field */
.field-error {
  color: var(--color-danger);
  font-size: var(--font-size-xs);
  margin-top: var(--space-1);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Helper text below inputs */
.field-hint {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  margin-top: var(--space-1);
}

/* Input error state */
.form-control.is-invalid,
.form-input.is-invalid,
.form-select-app.is-invalid {
  border-color: var(--color-danger);
}

.form-control.is-invalid:focus,
.form-input.is-invalid:focus {
  border-color: var(--color-danger);
  box-shadow: var(--focus-ring-danger);
}