/* ============================================================
   "Clear Sky" — light-first, blue-leaning theme
   Color · Spacing · Radius · Type · Elevation · Motion
   Fonts: IBM Plex Sans (display + body) · IBM Plex Mono (mono)
   ============================================================ */

:root {
  /* ---------- COLOR: Surfaces ---------- */
  --bg:            #FFFFFF;
  --mist:          #F5F9FD;
  --surface:       #EDF5FB;

  /* ---------- COLOR: Blues ---------- */
  --shoal:         #B7D7ED;
  --tide-light:    #7BAFD4;
  --tide:          #4B9CD3;
  --harbor:        #2C5080;

  /* ---------- COLOR: Accent (in-family) ---------- */
  --aster:         #B1B8DD;

  /* ---------- COLOR: Cool greys ---------- */
  --border:        #CFD3D5;
  --fog:           #A2AAAD;

  /* ---------- COLOR: Text ---------- */
  --ink-soft:      #5B6670;
  --ink:           #13294B;

  /* ---------- COLOR: Status (warm — errors only) ---------- */
  --clay:          #E95550;
  --clay-surface:  #FDECEB;

  /* ---------- COLOR: Derived washes ---------- */
  --tide-wash:     #E3F0F9;
  --aster-wash:    #EEF0F8;
  --shoal-soft:    #D6E8F4;

  /* ---------- SEMANTIC ALIASES ---------- */
  --color-page:            var(--bg);
  --color-panel:           var(--surface);
  --color-panel-subtle:    var(--mist);
  --color-action:          var(--tide);
  --color-action-hover:    var(--harbor);
  --color-action-soft:     var(--tide-light);
  --color-selected:        var(--shoal);
  --color-text:            var(--ink);
  --color-text-secondary:  var(--ink-soft);
  --color-text-disabled:   var(--fog);
  --color-divider:         var(--border);
  --color-accent-data:     var(--aster);
  --color-danger:          var(--clay);
  --color-danger-surface:  var(--clay-surface);

  /* ---------- SPACING (4px base scale) ---------- */
  --space-0:   0;
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.5rem;    /* 24px */
  --space-6:   2rem;      /* 32px */
  --space-7:   3rem;      /* 48px */
  --space-8:   4rem;      /* 64px */
  --space-9:   6rem;      /* 96px */

  /* ---------- RADIUS ---------- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* ---------- TYPE: families (Noonsight brand faces — do not swap) ---------- */
  --font-display: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-sans:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- TYPE: scale (1.250 major-third) ---------- */
  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-lg:    1.25rem;   /* 20px */
  --text-xl:    1.563rem;  /* 25px */
  --text-2xl:   1.953rem;  /* 31px */
  --text-3xl:   2.441rem;  /* 39px */
  --text-4xl:   3.052rem;  /* 49px */

  /* ---------- TYPE: weight / leading / tracking ---------- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;   /* eyebrow / small-caps labels */

  /* ---------- ELEVATION (soft, cool-tinted) ---------- */
  --shadow-sm:  0 1px 2px rgba(19, 41, 75, 0.06);
  --shadow-md:  0 4px 12px rgba(19, 41, 75, 0.08);
  --shadow-lg:  0 12px 28px rgba(19, 41, 75, 0.12);

  /* ---------- BORDERS ---------- */
  --border-width: 1px;
  --border-hairline: 1px solid var(--border);

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

  /* ---------- LAYOUT ---------- */
  --container-max: 72rem;   /* 1152px */
  --focus-ring: 0 0 0 3px var(--tide-wash), 0 0 0 4px var(--tide);
}

/* ---------- Base element defaults ---------- */
html { font-size: 100%; }

body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

/* Display face (IBM Plex Sans) carries the headings */
h1 { font-family: var(--font-display); font-size: var(--text-4xl); line-height: var(--leading-tight);
     letter-spacing: var(--tracking-tight); font-weight: var(--weight-bold); }
h2 { font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight);
     font-weight: var(--weight-semibold); }
h3 { font-family: var(--font-display); font-size: var(--text-xl);  line-height: var(--leading-snug);
     font-weight: var(--weight-semibold); }

a { color: var(--tide); text-decoration: none; }
a:hover { color: var(--harbor); text-decoration: underline; }

.eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium);
           letter-spacing: var(--tracking-wide); text-transform: uppercase;
           color: var(--harbor); }

hr { border: 0; border-top: var(--border-hairline); }

code, pre { font-family: var(--font-mono); }

:focus-visible { outline: none; box-shadow: var(--focus-ring); }