/*
 * CourseMate design tokens, ported from the Flutter app.
 *
 * Source of truth lives in the app repo:
 *   colours  -> lib/core/utils/theme/theme_colors.dart   (AppColors)
 *   spacing  -> lib/core/utils/theme/design_tokens.dart  (AppSpacing/AppRadii/AppSizes)
 *   type     -> lib/core/utils/theme/app_theme.dart      (AppTheme._textTheme)
 *
 * Values below are a hand port. When the app's tokens change, change them here
 * too -- nothing enforces the link across repos.
 */

:root {
  /* ---- Brand ------------------------------------------------------------ */
  --color-primary: #5a36c4;
  --color-primary-soft: #9b7ae8;
  --color-primary-dark: #4b2dae;
  --color-primary-container: #f0ecfc;
  --color-primary-container-strong: #e4dcfb;
  --color-on-primary: #ffffff;

  /* The logo mark is drawn in #562BC7, a shade off --color-primary, and carries
     a coral accent that appears nowhere in AppColors. Both are kept as their
     own tokens so the SVG and the UI are not silently reconciled. */
  --color-brand-mark: #562bc7;
  --color-brand-accent: #f24752;

  /* ---- Surfaces --------------------------------------------------------- */
  --color-surface: #ffffff;
  --color-surface-muted: #fafafa;
  --color-surface-tinted: #faf8ff;
  --color-on-surface: #27272a;

  /* ---- Text ------------------------------------------------------------- */
  --color-text: #27272a;
  --color-text-label: #52525b;
  --color-text-info: #71717a;
  --color-text-hint: #a1a1aa;

  /* ---- Status ----------------------------------------------------------- */
  --color-success: #059669;
  --color-success-container: #ecfdf5;
  --color-warning: #d97706;
  --color-warning-container: #fffbeb;
  --color-error: #e11d48;

  /* ---- Lines ------------------------------------------------------------ */
  --color-border: #e4e4e7;
  --color-divider: #f1f5f9;

  /* ---- Type ------------------------------------------------------------- */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;

  /* Sizes mirror AppTheme._textTheme exactly. */
  --text-headline-lg: 2rem; /* 32 */
  --text-headline-md: 1.75rem; /* 28 */
  --text-headline-sm: 1.5rem; /* 24 */
  --text-title-lg: 1.125rem; /* 18 */
  --text-title-md: 1rem; /* 16 */
  --text-title-sm: 0.875rem; /* 14 */
  --text-body-lg: 1rem; /* 16 */
  --text-body-md: 0.875rem; /* 14 */
  --text-body-sm: 0.75rem; /* 12 */
  --text-label-lg: 0.875rem; /* 14 */
  --text-label-md: 0.75rem; /* 12 */

  --leading-headline-lg: 1.25;
  --leading-headline: 1.3;
  --leading-title-lg: 1.35;
  --leading-title-md: 1.5;
  --leading-title-sm: 1.45;
  --leading-body: 1.5;
  --leading-body-sm: 1.35;

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

  /*
   * WEB-ONLY EXTENSION.
   *
   * The app's scale stops at 32px because it is phone-only. A landing page
   * hero needs to carry a 1440px viewport, so these two steps sit above
   * headlineLarge. They are not in the Flutter theme and have no counterpart
   * there -- do not port them back.
   */
  --text-display: clamp(2.25rem, 1.4rem + 4.2vw, 4rem); /* 36 -> 64 */
  --text-display-sm: clamp(1.75rem, 1.25rem + 2.5vw, 2.75rem); /* 28 -> 44 */
  --leading-display: 1.1;

  /* ---- Spacing (AppSpacing) --------------------------------------------- */
  --space-xxs: 0.25rem; /* 4 */
  --space-xs: 0.5rem; /* 8 */
  --space-sm: 0.75rem; /* 12 */
  --space-md: 1rem; /* 16 */
  --space-lg: 1.25rem; /* 20 */
  --space-xl: 1.5rem; /* 24 */
  --space-xxl: 2rem; /* 32 */

  /* Section rhythm is a web concern; the app has no equivalent. */
  --space-section: clamp(3.5rem, 2rem + 7vw, 7rem);

  /* ---- Radii (AppRadii) -------------------------------------------------- */
  --radius-xxs: 4px;
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Sizes (AppSizes) -------------------------------------------------- */
  --touch-target: 44px; /* AppSizes.minimumTouchTarget */
  --input-height: 46px; /* AppSizes.inputHeight */
  --width-page: 1100px; /* AppSizes.pageMaxWidthExpanded */
  --width-prose: 68ch;

  /* ---- Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --duration-fast: 160ms;
  --duration-base: 240ms;
}

/*
 * Dark palette, ported from AppColors' dark primitives. The app only defines
 * four dark values, so the rest are derived here and marked accordingly.
 *
 * It applies two ways: when the OS asks for dark and the visitor has not
 * chosen light, and when the visitor has chosen dark with the header toggle
 * (js/site.js sets data-theme on <html>). The two blocks must stay identical;
 * a shared block would need light-dark(), which older Android browsers lack.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-surface: #17131f; /* darkSurface */
    --color-surface-muted: #100d16; /* darkBackground */
    --color-surface-tinted: #1d1729; /* derived */
    --color-on-surface: #f8fafc; /* darkOnSurface */
    --color-border: #332a43; /* darkBorder */
    --color-divider: #241d31; /* derived */

    --color-text: #f8fafc;
    --color-text-label: #cbc7d4; /* derived */
    --color-text-info: #a5a0b3; /* derived */
    --color-text-hint: #7d7789; /* derived */

    --color-primary: #9b7ae8; /* lightPrimarySoft reads better on dark */
    --color-primary-container: #241a3d; /* derived */
    --color-primary-container-strong: #2f2450; /* derived */
  }
}

:root[data-theme="dark"] {
  --color-surface: #17131f; /* darkSurface */
  --color-surface-muted: #100d16; /* darkBackground */
  --color-surface-tinted: #1d1729; /* derived */
  --color-on-surface: #f8fafc; /* darkOnSurface */
  --color-border: #332a43; /* darkBorder */
  --color-divider: #241d31; /* derived */

  --color-text: #f8fafc;
  --color-text-label: #cbc7d4; /* derived */
  --color-text-info: #a5a0b3; /* derived */
  --color-text-hint: #7d7789; /* derived */

  --color-primary: #9b7ae8; /* lightPrimarySoft reads better on dark */
  --color-primary-container: #241a3d; /* derived */
  --color-primary-container-strong: #2f2450; /* derived */
}