/* =========================================================================
   NoyMed Academy - Design tokens
   Single source of truth for the shared visual language across the marketing
   site and the account portal. Nothing else in the codebase should hard-code a
   color, font size, spacing value, radius, or shadow - reference a token.

   Color direction (PROVISIONAL - pending brand review, Phase 4 milestone):
   a calm clinical palette. Deep blue-teal primary conveys trust and care;
   a warm terracotta accent carries calls-to-action. Every text/background
   pair below meets WCAG 2.1 AA (>= 4.5:1 body, >= 3:1 large/UI).
   ========================================================================= */

:root {
  /* ---- Brand: primary (blue-teal) ---- */
  --color-primary-50:  #eef7fa;
  --color-primary-100: #d6ebf1;
  --color-primary-200: #a9d4e1;
  --color-primary-300: #74b8cd;
  --color-primary-400: #3f97b4;
  --color-primary-500: #1a7f9c;
  --color-primary-600: #12657f;  /* main brand color */
  --color-primary-700: #0e4d64;
  --color-primary-800: #0a3a4c;
  --color-primary-900: #06323f;

  /* ---- Brand: accent (warm terracotta) - CTAs, highlights ---- */
  --color-accent-50:  #fbeee4;
  --color-accent-100: #f7e0cd;
  --color-accent-200: #eebfa0;
  --color-accent-300: #e29a72;
  --color-accent-400: #d1743f;
  --color-accent-500: #c05a24;
  --color-accent-600: #a4451a;  /* accent button background (white text passes AA) */
  --color-accent-700: #863715;

  /* ---- Ink / neutral text ---- */
  --color-ink-900: #10242b;  /* headings, primary text */
  --color-ink-700: #33474e;  /* body text */
  --color-ink-500: #5c6d73;  /* secondary text */
  --color-ink-400: #849398;
  --color-ink-300: #a9b4b9;

  /* ---- Surfaces & lines ---- */
  --color-bg:            #ffffff;
  --color-surface:       #f6f9fa;  /* subtle panel / alt row */
  --color-surface-sunk:  #eef2f4;
  --color-border:        #dde5e8;
  --color-border-strong: #c2ced3;
  --color-overlay:       rgba(6, 50, 63, 0.55);

  /* ---- Semantic ---- */
  --color-success-bg: #e4f3ea;  --color-success-fg: #1f6b43;  --color-success-border: #b8dfc8;
  --color-warning-bg: #fbf0dd;  --color-warning-fg: #8a5a12;  --color-warning-border: #ecd6ac;
  --color-danger-bg:  #fbe6e3;  --color-danger-fg:  #a5281c;  --color-danger-border:  #eec2bc;
  --color-info-bg:    #e6f1f5;  --color-info-fg:    #0e4d64;  --color-info-border:    #bcdae4;

  /* ---- Program status badges ---- */
  --status-available-bg: var(--color-success-bg);
  --status-available-fg: var(--color-success-fg);
  --status-soon-bg:      var(--color-warning-bg);
  --status-soon-fg:      var(--color-warning-fg);
  --status-archived-bg:  var(--color-surface-sunk);
  --status-archived-fg:  var(--color-ink-500);

  /* ---- Focus ring ---- */
  --focus-ring: 0 0 0 3px rgba(26, 127, 156, 0.45);

  /* =====================================================================
     Typography
     Fonts are SELF-HOSTED at launch (no third-party requests). Until the
     .woff2 files are dropped into /assets/fonts and @font-face declared in
     base.css, these stacks fall back to high-quality system fonts.
     Planned: "Inter" for UI/body, optional "Source Serif 4" for large
     marketing headings.
     ===================================================================== */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, Consolas, monospace;

  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.25rem;   /* 20 */
  --text-2xl:  1.5rem;    /* 24 */
  --text-3xl:  1.875rem;  /* 30 */
  --text-4xl:  2.25rem;   /* 36 */
  --text-5xl:  3rem;      /* 48 */
  --text-6xl:  3.75rem;   /* 60 - marketing hero only */

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

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

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

  /* ---- Spacing scale (0.25rem base) ---- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;

  /* ---- Radii ---- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 999px;

  /* ---- Elevation ---- */
  --shadow-xs: 0 1px 2px rgba(6, 50, 63, 0.06);
  --shadow-sm: 0 1px 2px rgba(6, 50, 63, 0.06), 0 1px 3px rgba(6, 50, 63, 0.08);
  --shadow-md: 0 2px 6px rgba(6, 50, 63, 0.08), 0 6px 16px rgba(6, 50, 63, 0.10);
  --shadow-lg: 0 8px 24px rgba(6, 50, 63, 0.12), 0 16px 48px rgba(6, 50, 63, 0.14);
  --shadow-xl: 0 16px 40px rgba(6, 50, 63, 0.16), 0 32px 72px rgba(6, 50, 63, 0.18);

  /* ---- Layout ---- */
  --container-max:  1120px;
  --container-narrow: 720px;
  --container-pad: var(--space-5);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* ---- Z-index scale ---- */
  --z-header:   100;
  --z-dropdown: 200;
  --z-overlay:  900;
  --z-modal:    1000;
  --z-toast:    1100;

  /* Breakpoints are documented here but must be written as literals in
     @media queries (custom properties are not valid there):
       --bp-sm: 480px;  --bp-md: 768px;  --bp-lg: 1024px;  --bp-xl: 1280px; */
}

/* Reserved for a future dark theme - structure only, not yet tuned.
@media (prefers-color-scheme: dark) {
  :root { }
}
*/