/*
 * Flobega Academy — Design Tokens
 * Source of truth: DESIGN.md §3, §4, §5
 * Edit the doc first, then propagate here. Components consume these tokens only.
 */

:root {
  /* ── Color · brand (deep teal — trust + healthcare credibility) ── */
  --brand-100: #D9EEEF;
  --brand-600: #1F8B8E;
  --brand-700: #0E6B6E;   /* primary */
  --brand-800: #0A5558;   /* hover/active */

  /* ── Color · accent (warm coral — celebration + earned moments) ── */
  --accent-coral:     #E07856;
  --accent-coral-100: #F8DDD1;

  /* ── Color · state ── */
  --success: #15876A;
  --warn:    #D08C2A;
  --danger:  #C24A36;

  /* ── Color · ink (text) ── */
  --ink-900: #0F1B2D;
  --ink-700: #2A3848;
  --ink-500: #4F5D6E;
  --ink-300: #9AA4B2;
  --ink-100: #D9DEE5;

  /* ── Color · surface ── */
  --surface:          #FBF8F3;   /* page bg — warm cream */
  --surface-elevated: #FFFFFF;   /* cards, modals */
  --surface-tint:     #F4EFE6;   /* banded sections */

  /* ── Color · structural ── */
  --line: #E8E1D5;               /* warm hairlines */
  --lock: #B8BEC9;               /* locked-state */
  --focus-ring: var(--brand-600);

  /* ── Type · families ── */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* ── Type · scale (px → rem for accessibility zoom) ── */
  --fs-display-xl: 3rem;     /* 48 */
  --fs-display-lg: 2.25rem;  /* 36 */
  --fs-display-md: 1.75rem;  /* 28 */
  --fs-display-sm: 1.375rem; /* 22 */
  --fs-body-lg:    1.125rem; /* 18 */
  --fs-body:       1rem;     /* 16 */
  --fs-body-sm:    0.875rem; /* 14 */
  --fs-mono-sm:    0.8125rem;/* 13 */

  /* ── Type · line heights ── */
  --lh-display-xl: 1.1;
  --lh-display-lg: 1.15;
  --lh-display-md: 1.2;
  --lh-display-sm: 1.3;
  --lh-body-lg:    1.55;
  --lh-body:       1.55;
  --lh-body-sm:    1.5;
  --lh-label:      1.3;

  /* ── Type · weights ── */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  /* ── Spacing (4px base) ── */
  --s-1:  0.25rem;  /*  4 */
  --s-2:  0.5rem;   /*  8 */
  --s-3:  0.75rem;  /* 12 */
  --s-4:  1rem;     /* 16 */
  --s-6:  1.5rem;   /* 24 */
  --s-8:  2rem;     /* 32 */
  --s-12: 3rem;     /* 48 */
  --s-16: 4rem;     /* 64 */
  --s-24: 6rem;     /* 96 */

  /* ── Radii ── */
  --r-sm:   8px;    /* chips, inputs */
  --r-md:   12px;   /* buttons */
  --r-lg:   16px;   /* cards */
  --r-xl:   24px;   /* modals, bottom sheets (top corners) */
  --r-pill: 9999px;

  /* ── Shadows (warm-tinted, not pure black) ── */
  --sh-sm: 0 1px 2px  rgba(15, 28, 45, 0.06);
  --sh-md: 0 4px 12px rgba(15, 28, 45, 0.08);
  --sh-lg: 0 12px 32px rgba(15, 28, 45, 0.10);
  --sh-glow: 0 0 0 4px rgba(224, 120, 86, 0.25); /* coral celebration glow */

  /* ── Motion ── */
  --t-fast:  120ms;
  --t-base:  200ms;
  --t-slow:  400ms;
  --t-cele:  600ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Layout ── */
  --maxw-read:   45rem;   /* 720 — reading column */
  --maxw-app:    60rem;   /* 960 — app pages */
  --maxw-grid:   75rem;   /* 1200 — catalog grid */
  --topbar-h:    56px;
  --bottomnav-h: 64px;
  --bottombar-h: 80px;   /* sticky action bar on phone (incl. safe area) */

  /* ── Hit target ── */
  --hit: 48px;

  /* ── Z-index ── */
  --z-base:    1;
  --z-sticky:  10;
  --z-modal:   100;
  --z-toast:   1000;
}

/* prefers-reduced-motion: zero out celebratory motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast:  0ms;
    --t-base:  0ms;
    --t-slow:  0ms;
    --t-cele:  0ms;
  }
}