/* Nexus design tokens: the single place to change colours, type, spacing and
   radii. Rules: design-system/sekolah-pribadi-depok/pages/nexus-app.md
   (overrides MASTER.md). Never put a raw hex value in another CSS file. */

:root {
  /* Brand (from the school emblem) */
  --color-brand-blue: #1F4E9F;
  --color-brand-red: #B91C1C;
  --color-navy: #0F2A5C;

  /* Roles */
  --color-action: var(--color-brand-blue);
  --color-action-hover: color-mix(in srgb, var(--color-brand-blue) 80%, var(--color-navy));
  --color-action-tint: color-mix(in srgb, var(--color-brand-blue) 8%, var(--color-surface));
  --color-problem: var(--color-brand-red);
  --color-problem-tint: color-mix(in srgb, var(--color-brand-red) 8%, var(--color-surface));
  --color-destructive: var(--color-brand-red);
  --color-destructive-hover: color-mix(in srgb, var(--color-brand-red) 82%, var(--color-foreground));
  --color-destructive-tint: var(--color-problem-tint);
  --color-success: #15803d;
  --color-success-tint: color-mix(in srgb, var(--color-success) 10%, var(--color-surface));
  --color-success-track: color-mix(in srgb, var(--color-success) 40%, var(--color-surface));
  --color-accent: #f26522; /* MASTER accent; only feeds the warning mix */
  --color-warning: color-mix(in srgb, var(--color-accent) 70%, var(--color-foreground));
  --color-warning-tint: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));

  /* Neutrals (MASTER) */
  --color-foreground: #12233c;
  --color-foreground-alt: #1c2733;
  --color-muted-foreground: #5a6472;
  --color-on-primary: #ffffff;
  --color-surface: #ffffff;
  --color-surface-page: #f2f5f9;
  --color-surface-muted: #e9eef5;
  --color-border: rgba(18, 35, 60, 0.08);
  --color-border-strong: rgba(18, 35, 60, 0.16);
  --color-overlay: rgba(18, 35, 60, 0.45);
  --color-on-navy-muted: rgba(255, 255, 255, 0.72);

  /* Only floating layers (menus, dialogs, toasts) cast a shadow. */
  --shadow-e4: 0 30px 56px -14px rgba(18, 35, 60, 0.28);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-action) 35%, transparent);

  /* Type */
  --font-sans: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-wordmark: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --fs-caption: 0.75rem;   /* 12px: captions, table headers, chips */
  --fs-ui: 0.8125rem;      /* 13px: controls, secondary text */
  --fs-body: 0.875rem;     /* 14px: body, table cells */
  --fs-card-title: 1rem;   /* 16px */
  --fs-page-title: 1.5rem; /* 24px */
  --fs-metric: 2rem;       /* 32px: stat tiles */
  --fs-hero: 3rem;         /* 48px: one per view */

  /* Spacing (8px rhythm) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Radii */
  --radius-sm: 6px;  /* chips */
  --radius-md: 8px;  /* buttons, inputs */
  --radius-lg: 12px; /* cards */
  --radius-xl: 16px; /* dialogs */

  /* Motion */
  --motion-ui: 150ms;
  --ease-standard: ease;

  /* Layout */
  --sidebar-width: 248px;
  --topbar-height: 56px;
  --bottom-nav-height: 64px;
  --content-max: 1200px;
  --touch-target: 44px;
}