/**
 * Parents360 Design System — Tokens (Step 1)
 * ============================================================
 * Single source of truth for color, type, space, radius, elevation,
 * motion, and z-index. All UI must consume these variables — never
 * ad-hoc hex values in components or inline styles.
 *
 * Naming convention:
 *   --color-{role}-{step}   semantic color roles
 *   --font-*                font families
 *   --text-*                type scale (rem)
 *   --leading-*             line heights
 *   --space-*               8px grid spacing
 *   --radius-*              corner radii
 *   --shadow-*              elevation
 *   --duration-*, --ease-*  motion
 *   --z-*                   stacking
 *
 * Legacy aliases (--ink, --teal, --card, …) map onto these tokens so
 * existing rules keep working until Step 2 component refactor.
 * ============================================================
 */

/* -------------------------------------------------------------------------- */
/* Font faces — Inter (UI)                                                    */
/* -------------------------------------------------------------------------- */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ------------------------------------------------------------------------ */
  /* Color — Slate / Navy + Indigo accent (corporate)                         */
  /* ------------------------------------------------------------------------ */

  /* Neutrals — warm stone, easier on the eye than cold slate */
  --color-neutral-0: #ffffff;
  --color-neutral-25: #fbfbfa;
  --color-neutral-50: #f4f5f4;
  --color-neutral-100: #e8ebe9;
  --color-neutral-200: #d5dbd8;
  --color-neutral-300: #b7c0bc;
  --color-neutral-400: #8a9691;
  --color-neutral-500: #66726e;
  --color-neutral-600: #4d5754;
  --color-neutral-700: #36403d;
  --color-neutral-800: #1f2a27;
  --color-neutral-900: #13201c;
  --color-neutral-950: #0b1412;

  /* Brand — Mediterranean teal (civic, school association) */
  --color-brand-50: #eef8f6;
  --color-brand-100: #d5efe9;
  --color-brand-200: #abdcd2;
  --color-brand-300: #74c2b4;
  --color-brand-400: #3ea393;
  --color-brand-500: #1f8a7a;
  --color-brand-600: #187166;
  --color-brand-700: #155a52;
  --color-brand-800: #144843;
  --color-brand-900: #123c38;

  /* Semantic status */
  --color-success-50: #ecfdf5;
  --color-success-500: #10b981;
  --color-success-600: #059669;
  --color-success-700: #047857;

  --color-warning-50: #fffbeb;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;
  --color-warning-700: #b45309;

  --color-danger-50: #fef2f2;
  --color-danger-500: #ef4444;
  --color-danger-600: #dc2626;
  --color-danger-700: #b91c1c;

  --color-info-50: #eff6ff;
  --color-info-500: #3b82f6;
  --color-info-600: #2563eb;
  --color-info-700: #1d4ed8;

  /* Semantic surfaces & text */
  --color-bg: var(--color-neutral-50);
  --color-bg-elevated: var(--color-neutral-0);
  --color-bg-muted: var(--color-neutral-100);
  --color-bg-inverse: var(--color-neutral-900);

  --color-surface: var(--color-neutral-0);
  --color-surface-hover: var(--color-neutral-25);
  --color-surface-active: var(--color-neutral-50);

  --color-border: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);
  --color-border-subtle: var(--color-neutral-100);

  --color-text: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-muted: var(--color-neutral-500);
  --color-text-inverse: var(--color-neutral-0);
  --color-text-link: var(--color-brand-700);
  --color-text-link-hover: var(--color-brand-800);

  --color-primary: var(--color-brand-600);
  --color-primary-hover: var(--color-brand-700);
  --color-primary-active: var(--color-brand-800);
  --color-primary-subtle: var(--color-brand-50);
  --color-primary-foreground: var(--color-neutral-0);

  --color-secondary: var(--color-neutral-100);
  --color-secondary-hover: var(--color-neutral-200);
  --color-secondary-foreground: var(--color-neutral-800);

  --color-accent: var(--color-brand-500);
  --color-focus-ring: var(--color-brand-500);

  --color-sidebar-bg: #10262a;
  --color-sidebar-bg-accent: #173338;
  --color-sidebar-text: #e8f2f0;
  --color-sidebar-text-muted: #9bb3ae;
  --color-sidebar-active: #7dd3c4;
  --color-sidebar-active-bg: rgba(125, 211, 196, 0.14);

  --color-overlay: rgba(15, 23, 42, 0.48);

  /* ------------------------------------------------------------------------ */
  /* Typography                                                               */
  /* ------------------------------------------------------------------------ */

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);
  --font-ui: var(--font-sans);
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  /* Type scale — modular, ~1.2 ratio from 16px base (html 16px) */
  --text-xs: 0.75rem;     /* 12px — labels, captions */
  --text-sm: 0.875rem;    /* 14px — secondary body, inputs */
  --text-base: 1rem;      /* 16px — body */
  --text-md: 1.125rem;    /* 18px — lead / subtitle */
  --text-lg: 1.25rem;     /* 20px — H3 */
  --text-xl: 1.5rem;      /* 24px — H2 */
  --text-2xl: 1.875rem;   /* 30px — H1 */
  --text-3xl: 2.25rem;    /* 36px — display */
  --text-4xl: 3rem;       /* 48px — hero (rare) */

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

  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  /* ------------------------------------------------------------------------ */
  /* Spacing — 8px grid                                                       */
  /* ------------------------------------------------------------------------ */

  --space-0: 0;
  --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 */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* Layout */
  --layout-sidebar-width: 16.5rem; /* 264px */
  --layout-content-max: 72rem;     /* 1152px */
  --layout-gutter: var(--space-6);

  /* ------------------------------------------------------------------------ */
  /* Radius / elevation / motion / z-index                                    */
  /* ------------------------------------------------------------------------ */

  --radius-none: 0;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.625rem;
  --radius-xl: 0.875rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;
  --radius: var(--radius-lg);

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.05);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-focus-ring) 35%, transparent);
  --shadow: var(--shadow-md);

  --duration-fast: 120ms;
  --duration-normal: 160ms;
  --duration-slow: 220ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.1);

  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-nav-drawer: 600;

  /* Control sizing (8px grid) */
  --control-height-sm: 2rem;     /* 32px */
  --control-height-md: 2.5rem;   /* 40px */
  --control-height-lg: 3rem;     /* 48px */
  --control-padding-x: var(--space-3);

  /* ------------------------------------------------------------------------ */
  /* Legacy aliases — bridge until Step 2                                     */
  /* ------------------------------------------------------------------------ */

  --ink: var(--color-text);
  --muted: var(--color-text-muted);
  --paper: var(--color-bg);
  --card: var(--color-surface);
  --line: var(--color-border);
  --teal: var(--color-primary);
  --teal-dark: var(--color-primary-hover);
  --coral: var(--color-danger-600);
  --ok: var(--color-success-600);
  --warn: var(--color-warning-500);
  --danger: var(--color-danger-600);
}