/* ── Ocean Blue Serenity — CSS Design Tokens ──────────────────────────── */
:root {
  /* Primary palette */
  --color-primary:        #1a237e;   /* deep indigo */
  --color-primary-dark:   #0d1257;   /* near-black indigo */
  --color-primary-mid:    #1565c0;   /* ocean blue */
  --color-accent:         #0288d1;   /* vivid sky blue */
  --color-accent-light:   #29b6f6;   /* crystal sky blue */
  --color-accent-pale:    #4fc3f7;   /* pale sky */

  /* Surfaces */
  --color-bg:             #f7fbff;   /* near-white with blue tint */
  --color-surface:        #e3f2fd;   /* light blue surface */
  --color-surface-alt:    #bbdefb;   /* medium blue surface */
  --color-code-bg:        #e8f4fd;   /* code block background */
  --color-border:         #b3d9f7;   /* subtle border */
  --color-border-strong:  #7cb8e8;   /* stronger border */

  /* Text */
  --color-text:           #0d1b2a;   /* near-black */
  --color-text-muted:     #445565;   /* muted body */
  --color-text-faint:     #6b8096;   /* faint label */
  --color-white:          #ffffff;

  /* Semantic */
  --color-link:           #1565c0;
  --color-link-hover:     #0288d1;
  --color-heading:        #1a237e;

  /* Calibration pillar accent */
  --color-pillar-3:       #006064;

  /* Layout */
  --header-height:        64px;
  --content-max-width:    1400px;
  --article-max-width:    920px;
  --card-min-width:       280px;

  /* Spacing scale */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "Source Code Pro", Consolas, "Courier New", monospace;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-md:   1.0625rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.25rem;
  --font-size-2xl:  1.5rem;
  --font-size-3xl:  1.875rem;
  --font-size-4xl:  2.25rem;
  --font-size-5xl:  3rem;
  --line-height-tight:  1.3;
  --line-height-body:   1.72;

  /* Shape */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(26,35,126,0.07);
  --shadow-sm: 0 2px 6px rgba(26,35,126,0.09);
  --shadow-md: 0 4px 16px rgba(26,35,126,0.12);
  --shadow-lg: 0 8px 32px rgba(26,35,126,0.16);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition:      0.22s ease;
  --transition-slow: 0.35s ease;
}