/* ============================================
   CRGAR Portal — Design Tokens
   Direction: Editorial Coastal Authority
   ============================================ */

:root {
  /* === Color: foundation === */
  --bg-primary:     #FFFFFF;   /* clean white */
  --bg-secondary:   #F4F6FA;   /* soft cool gray */
  --bg-tertiary:    #E6EAF2;   /* deeper cool */
  --surface:        #FFFFFF;
  --surface-soft:   #FAFBFD;

  /* === Color: text === */
  --text-primary:   #0E1633;   /* near-black with navy undertone */
  --text-secondary: #3D4366;
  --text-muted:     #757B92;
  --text-faint:     #A8ACBE;
  --text-on-accent: #FFFFFF;

  /* === Color: accent (CRGAR navy from logo) === */
  --accent:         #1B2D5C;   /* CRGAR institutional navy */
  --accent-hover:   #253A75;   /* lighter navy for hover */
  --accent-soft:    #E1E5EF;   /* tinted background */
  --accent-faint:   #F0F2F8;
  --accent-deep:    #131F44;   /* darker navy for headers/footer */

  /* === Color: utility === */
  --border:         #DCDFE9;
  --border-soft:    #E9EBF2;
  --border-strong:  #BFC4D5;
  --success:        #1B2D5C;   /* navy verified marker (no green) */
  --warn:           #C4923B;
  --danger:         #B0463E;

  /* === Typography: family === */
  --font-display:   'Fraunces', 'Georgia', serif;
  --font-body:      'General Sans', 'Söhne', -apple-system, system-ui, sans-serif;
  --font-mono:      'JetBrains Mono', 'SF Mono', monospace;

  /* === Typography: scale === */
  --text-xs:        0.75rem;     /* 12px */
  --text-sm:        0.875rem;    /* 14px */
  --text-base:      1rem;        /* 16px */
  --text-lg:        1.125rem;    /* 18px */
  --text-xl:        1.25rem;     /* 20px */
  --text-2xl:       1.5rem;      /* 24px */
  --text-3xl:       1.875rem;    /* 30px */
  --text-4xl:       2.5rem;      /* 40px */
  --text-5xl:       3.5rem;      /* 56px */
  --text-6xl:       4.5rem;      /* 72px */
  --text-display:   6rem;        /* 96px */

  /* === Typography: weights === */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* === Typography: tracking === */
  --tracking-tight: -0.03em;
  --tracking-snug:  -0.015em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-loose: 0.12em;

  /* === Typography: leading === */
  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --leading-loose:  1.85;

  /* === Spacing scale === */
  --s-1:  0.25rem;   /* 4 */
  --s-2:  0.5rem;    /* 8 */
  --s-3:  0.75rem;   /* 12 */
  --s-4:  1rem;      /* 16 */
  --s-5:  1.5rem;    /* 24 */
  --s-6:  2rem;      /* 32 */
  --s-7:  3rem;      /* 48 */
  --s-8:  4rem;      /* 64 */
  --s-9:  6rem;      /* 96 */
  --s-10: 8rem;      /* 128 */
  --s-11: 12rem;     /* 192 */

  /* === Radii === */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   20px;
  --r-2xl:  32px;
  --r-full: 9999px;

  /* === Shadows: layered, navy-tinted === */
  --shadow-sm:    0 1px 2px rgba(14, 22, 51, 0.05);
  --shadow-card:  0 1px 2px rgba(14, 22, 51, 0.04), 0 4px 12px rgba(14, 22, 51, 0.06);
  --shadow-elev:  0 4px 8px rgba(14, 22, 51, 0.06), 0 16px 32px rgba(27, 45, 92, 0.10);
  --shadow-modal: 0 24px 64px rgba(14, 22, 51, 0.18);
  --shadow-photo: 0 2px 4px rgba(14, 22, 51, 0.08), 0 16px 40px rgba(14, 22, 51, 0.14);

  /* === Motion === */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    450ms;
  --dur-page:    650ms;

  /* === Layout === */
  --container-narrow: 720px;
  --container-base:   1080px;
  --container-wide:   1400px;
  --header-h:         108px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:  0ms;
    --dur-base:  0ms;
    --dur-slow:  0ms;
    --dur-page:  0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}