@layer reset, tokens, base, layout, components, flat, utilities;

/* Single source of truth for the student web. Values mirror the mobile app
   (lib/utils/colors.dart, lib/utils/design_tokens.dart). Flat rule (owner brief): one brand colour (teal), solid
   surfaces, no gradients, no glass. Semantic colours (success, warning, error) carry meaning only. */
@layer tokens {
  :root {
    color-scheme: light dark;

    --sb-teal: #5FA8B8;
    --sb-teal-dark: #2C5F6F;
    --sb-teal-light: #E0F2F7;
    --sb-teal-accent: #7EC4CF;
    --sb-success: #10B981;
    --sb-warning: #F59E0B;
    --sb-error: #EF4444;
    --sb-info: #3B82F6;
    --sb-on-accent: #FFFFFF;
    --sb-teal-strong: #3A7C8C;
    --sb-logo: light-dark(#1F6B75, #FFFFFF); /* the logo's own colour; the name beside the mark uses it too */
    /* Teal for lines (borders, outlines) on surfaces: AA non-text contrast (3:1) in both themes. */
    --sb-teal-line: light-dark(#3A7C8C, #7EC4CF);
    --sb-error-strong: #DC2626;

    --sb-bg: light-dark(#F8FAFC, #121212);
    /* Landing page paper (warm off-white) and its hairline. */
    --sb-paper: light-dark(#FBF8F2, #161B1E);
    --sb-paper-line: light-dark(#E7E0D3, #2A3236);
    --sb-surface: light-dark(#FFFFFF, #2D2D2D);
    --sb-surface-2: light-dark(#F1F5F9, #262626);
    --sb-border: light-dark(#E2E8F0, #404040);
    --sb-ink: light-dark(#1E293B, #FFFFFF);
    --sb-ink-2: light-dark(#64748B, #94A3B8);
    --sb-ink-3: light-dark(#94A3B8, #64748B);
    --sb-track: light-dark(rgb(15 23 42 / 0.08), rgb(255 255 255 / 0.10));
    --sb-hover: light-dark(rgb(15 23 42 / 0.04), rgb(255 255 255 / 0.06));
    --sb-scrim: rgb(15 23 42 / 0.45);
    --sb-focus: light-dark(#2C5F6F, #7EC4CF);
    --sb-teal-surface: light-dark(#E0F2F7, rgb(95 168 184 / 0.16));
    --sb-teal-ink: light-dark(#2C5F6F, #7EC4CF);
    --sb-active-surface: light-dark(rgb(95 168 184 / 0.16), rgb(126 196 207 / 0.14));
    /* Ring centre: the surface the ring sits on (rings live on cards). */
    --sb-ring-hole: var(--sb-surface);
    /* Start-side accent bar on heroes and banners. */
    --sb-accent-bar: 4px solid var(--sb-teal);
    --sb-toast-bg: light-dark(#1E293B, #F8FAFC);
    --sb-toast-ink: light-dark(#F8FAFC, #1E293B);

    --sb-success-surface: light-dark(#D1FAE5, rgb(16 185 129 / 0.18));
    --sb-success-ink: light-dark(#047857, #6EE7B7);
    --sb-warning-surface: light-dark(#FFF4E6, rgb(245 158 11 / 0.18));
    --sb-warning-ink: light-dark(#B45309, #FCD34D);
    --sb-error-surface: light-dark(#FEE2E2, rgb(239 68 68 / 0.18));
    --sb-error-ink: light-dark(#B91C1C, #FCA5A5);
    --sb-info-surface: light-dark(#E0F2FE, rgb(59 130 246 / 0.18));
    --sb-info-ink: light-dark(#0369A1, #93C5FD);
    --sb-neutral-surface: light-dark(#F1F5F9, rgb(148 163 184 / 0.16));
    --sb-neutral-ink: light-dark(#475569, #CBD5E1);

    /* Course palette: rings, dots, bars and stripes only, never text. */
    --sb-course-0: #5FA8B8;
    --sb-course-1: #3B82F6;
    --sb-course-2: light-dark(#2C5F6F, #CBD5E1);
    --sb-course-3: #F59E0B;
    --sb-course-4: light-dark(#64748B, #94A3B8);
    --sb-course-5: #10B981;


    --sb-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --sb-fs-xs: 0.6875rem;
    --sb-fs-sm: 0.875rem;
    --sb-fs-md: 1rem;
    --sb-fs-lg: 1.125rem;
    --sb-fs-xl: 1.25rem;
    --sb-fs-2xl: 1.5rem;
    --sb-fs-3xl: 2rem;
    --sb-fs-4xl: 2.25rem;
    --sb-fs-5xl: 3rem;
    --sb-fs-6xl: 3.5rem;

    --sb-space-1: 4px;
    --sb-space-2: 8px;
    --sb-space-3: 12px;
    --sb-space-4: 16px;
    --sb-space-5: 20px;
    --sb-space-6: 24px;
    --sb-space-8: 32px;
    --sb-space-12: 48px;

    --sb-radius-sm: 8px;
    --sb-radius-md: 12px;
    --sb-radius-lg: 16px;
    --sb-radius-xl: 24px;
    --sb-radius-2xl: 32px;
    --sb-radius-pill: 999px;

    --sb-shadow-sm: 0 1px 2px light-dark(rgb(15 23 42 / 0.05), transparent);
    --sb-shadow-md: 0 4px 6px light-dark(rgb(15 23 42 / 0.07), transparent);
    --sb-shadow-lg: 0 10px 15px light-dark(rgb(15 23 42 / 0.10), transparent);
    --sb-shadow-float: 0 8px 30px light-dark(rgb(15 23 42 / 0.06), transparent);

    --sb-dur-fast: 150ms;
    --sb-dur: 200ms;
    --sb-dur-slow: 300ms;
    --sb-dur-page: 600ms;
    --sb-ease: cubic-bezier(0.25, 1, 0.5, 1);

    --sb-sidebar: 240px;
    --sb-rail: 72px;
    --sb-topbar: 64px;
    --sb-tabbar: 64px;
    --sb-content-max: 1440px;
    --sb-gutter: 24px;
  }

  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] { color-scheme: dark; }
  :root:lang(ar) { --sb-font: "Cairo", "Plus Jakarta Sans", system-ui, sans-serif; }

  @media (max-width: 1279.98px) { :root { --sb-gutter: 16px; } }
  @media (max-width: 767.98px) { :root { --sb-gutter: 12px; } }
}