/* ═══════════════════════════════════════════════════════════
   Fenibs Blog — design tokens
   The Fenibs UI kit v5 (light) as the CRM draws it: a sage canvas, white cards with soft
   shadows tinted brand blue, teal as the accent, Inter / Inter Tight / JetBrains Mono.
   Text pairs are checked by script/public_contrast.rb: the kit's tertiary #7E918A (3.3:1)
   and white on teal (2.3:1) do not pass, so the small text and the links take deeper
   shades of the same hues.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Brand ── */
  --brand-teal:      #5FB8C0;
  --brand-blue:      #4181AB;
  --brand-navy:      #013C64;
  --brand-coral:     #F16876;  /* decoration only, never text */

  /* ── Surfaces ── */
  --bg:              #F5F8F6;  /* the page */
  --surface:         #FFFFFF;  /* cards, panels, fields */
  --surface-raised:  #E6EDEA;  /* a fill on a card: a thumb, a hovered control */
  --surface-sunken:  #EDF1EE;  /* a well: a table head, a code block */

  /* ── Accent: teal fills, a deeper teal for anything read ── */
  --accent:          #5FB8C0;  /* fills, markers, lines */
  --accent-ink:      #2A737A;  /* links and small accent text: 5.5:1 on white, 5.1 on the page */
  --accent-ink-hover:#1F5D63;
  --accent-subtle:   rgba(95, 184, 192, 0.12);
  --tint:            rgba(95, 184, 192, 0.10);
  --border-accent:   rgba(42, 115, 122, 0.32);
  /* The main button: deep teal into deep blue (the CRM's accent gradient, a shade darker so
     that white text reads at 5.5:1 and better along the whole of it). */
  --primary-fill:    linear-gradient(135deg, #2A737A 0%, #2D6A93 100%);
  --on-primary:      #FFFFFF;
  --on-accent:       #0F1F1A;  /* text on a plain teal fill: 7.4:1 */

  /* ── Text ── */
  --text:            #0F1F1A;
  --text-body:       #26332E;  /* article prose: 12.6:1 */
  --text-secondary:  #4D5E57;  /* 6.9:1 on white */
  --text-tertiary:   #5F7169;  /* 5.2:1 on white, 4.9 on the page — the floor for small text */
  --heading-gradient: linear-gradient(120deg, #0F1F1A 0%, #0F1F1A 40%, #013C64 72%, #2A737A 100%);

  /* ── Lines ── */
  --border:          rgba(13, 26, 18, 0.08);
  --border-hover:    rgba(13, 26, 18, 0.16);
  --border-strong:   rgba(13, 26, 18, 0.16);
  /* A field's outline: the one line that tells a field from the card, so 3:1 (WCAG 1.4.11). */
  --border-control:  #84918B;
  /* The CRM topbar's underline: teal into blue, fading at both ends. */
  --brand-line:      linear-gradient(90deg, transparent 0%, rgba(95, 184, 192, 0.55) 30%, rgba(65, 129, 171, 0.55) 70%, transparent 100%);
  --selection:       rgba(95, 184, 192, 0.28);

  /* ── Grounds: the kit's ambient spots of the brand colours, never under text that needs them ── */
  --page-spots:
    radial-gradient(ellipse 60% 50% at 8% 4%, rgba(95, 184, 192, 0.16) 0%, transparent 70%),
    radial-gradient(ellipse 50% 45% at 96% 10%, rgba(65, 129, 171, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 88% 96%, rgba(241, 104, 118, 0.07) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 4% 90%, rgba(95, 184, 192, 0.08) 0%, transparent 70%);
  --card-spots:
    radial-gradient(ellipse 45% 90% at 100% 0%, rgba(95, 184, 192, 0.16) 0%, transparent 70%),
    radial-gradient(ellipse 35% 80% at 0% 100%, rgba(65, 129, 171, 0.10) 0%, transparent 70%),
    radial-gradient(ellipse 25% 60% at 70% 110%, rgba(241, 104, 118, 0.07) 0%, transparent 70%);
  /* A missing cover: the spots over a fine 40px grid. */
  --cover-placeholder:
    radial-gradient(ellipse 70% 90% at 85% 10%, rgba(95, 184, 192, 0.32), transparent 60%),
    radial-gradient(ellipse 60% 80% at 10% 100%, rgba(65, 129, 171, 0.20), transparent 60%),
    radial-gradient(ellipse 40% 50% at 30% 20%, rgba(241, 104, 118, 0.10), transparent 60%),
    repeating-linear-gradient(0deg, rgba(1, 60, 100, 0.05) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(1, 60, 100, 0.05) 0 1px, transparent 1px 40px),
    linear-gradient(135deg, #F2F7F6, #E6EDEA);
  --header-glass:    rgba(255, 255, 255, 0.78);
  /* The ink island's own fills: navy glass for the bar, solid navy for its dialog. */
  --island-glass:    linear-gradient(135deg, rgba(1, 60, 100, 0.96) 0%, rgba(1, 46, 78, 0.96) 100%);
  --island-ground:   linear-gradient(160deg, #013C64 0%, #012E4E 100%);
  /* The dim under a dialog, and the same at rest (a transition needs both ends). */
  --scrim:           rgba(15, 31, 26, 0.32);
  --scrim-sheet:     rgba(15, 31, 26, 0.48);
  --scrim-clear:     rgba(15, 31, 26, 0);

  /* ── Status ── */
  --error:           #B83A48;  /* 5.6:1 on white, 4.7 on its own tint */
  --error-subtle:    rgba(184, 58, 72, 0.08);
  --error-border:    rgba(184, 58, 72, 0.36);
  --error-ring:      0 0 0 3px rgba(184, 58, 72, 0.14);
  --success:         #237A4B;  /* 5.3:1 on white */

  /* ── Type ── */
  --font-heading:    'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-body:       'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:       'JetBrains Mono', ui-monospace, monospace;

  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-md:   15px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  28px;
  --text-4xl:  32px;
  --text-5xl:  40px;
  --text-6xl:  48px;

  /* ── Line heights: in px on the 4px grid, one per size, named by value. ── */
  --lh-16: 16px;
  --lh-20: 20px;
  --lh-24: 24px;
  --lh-28: 28px;
  --lh-32: 32px;
  --lh-36: 36px;
  --lh-40: 40px;
  --lh-48: 48px;
  --lh-56: 56px;

  /* Headings: tight, as on fenibs.com. */
  --tracking-tight:  -0.025em;
  /* Small caps labels (a footer column, a filter group): the CRM's card titles. */
  --tracking-caps:   0.08em;

  /* ── Space (4px grid) ── */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;  --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px;  --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* ── Radii: the Fenibs scale, the same on all four corners. ── */
  --r-xs:   6px;    /* inline code, a small mark */
  --r-sm:   10px;   /* small buttons, a button inside a field, list items */
  --r-md:   14px;   /* buttons, fields, banners, menus */
  --r-lg:   20px;   /* cards, panels, pictures */
  --r-xl:   28px;   /* the slider, the bottom bar, dialogs */
  --r-full: 999px;  /* tags, chips, counters */
  /* A picture flush with a card's top: the card's corners at the top, square at the bottom. */
  --r-media-top: var(--r-lg) var(--r-lg) 0 0;
  --r-control:   var(--r-md);
  --r-control-l: var(--r-md);
  --r-field:     var(--r-md);

  /* ── Shadows: tinted brand blue, as in the kit's light theme ── */
  --sh-xs: 0 1px 2px rgba(1, 60, 100, 0.04);
  --sh-sm: 0 1px 2px rgba(1, 60, 100, 0.04), 0 4px 16px rgba(1, 60, 100, 0.06);
  --sh-md: 0 4px 16px rgba(1, 60, 100, 0.06), 0 12px 32px rgba(1, 60, 100, 0.08);
  --sh-card-hover: 0 4px 16px rgba(1, 60, 100, 0.06), 0 16px 40px rgba(1, 60, 100, 0.10);
  --sh-island: 0 8px 24px rgba(1, 60, 100, 0.18), 0 2px 6px rgba(1, 60, 100, 0.12);
  --sh-footer: 0 -4px 24px rgba(1, 60, 100, 0.04);
  /* The kit's coloured shadows: under the main button, round a teal mark. */
  --sh-primary: 0 2px 8px rgba(42, 115, 122, 0.22);
  --sh-primary-hover: 0 4px 16px rgba(42, 115, 122, 0.30);
  --sh-teal: 0 4px 24px rgba(95, 184, 192, 0.20);
  --ring: 0 0 0 3px rgba(95, 184, 192, 0.24);
  /* Hover and press on a light surface. */
  --overlay-hover:   rgba(15, 31, 26, 0.025);
  --overlay-pressed: rgba(15, 31, 26, 0.05);

  /* ── Motion ──
     100 a response to a press, 200 controls, 300 sheets and dialogs, 500 a screen's change —
     nothing longer. Entering and the user's own moves ease out; leaving is faster and eases
     in; a system move (a morph, a sliding thumb) eases in and out. */
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit:  cubic-bezier(0.7, 0, 0.84, 0);
  /* Shapes that morph (the header search): even acceleration both ways — --ease covers
     94% of the distance in the first third and reads as a jump. */
  --ease-morph: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1:  100ms;
  --dur-2:  200ms;
  --dur-3:  300ms;
  --dur-4:  500ms;

  /* ── Layout ── */
  --container:      1200px;
  --gutter:         32px;
  --article-width:  720px;
  --header-height:  64px;
  /* The header's bottom corners: a panel laid over the page. */
  --header-radius:  var(--r-xl);
}

@media (max-width: 768px) {
  :root { --gutter: 16px; --header-radius: var(--r-lg); }
}

/* ── Ink: a dark island on the light page ──
   The feed's bottom bar and its filter dialog float over the feed in Fenibs navy, so the
   bar is seen at once. The same roles as above, for a dark ground: --surface is the step
   nearest it, --surface-raised the thumb. Light text 9.9:1, the tertiary 5.4:1, the deep
   teal's light twin 6.2:1 on #013C64 (script/public_contrast.rb). */
.theme-ink {
  --bg:              #013C64;
  --surface:         rgba(232, 240, 236, 0.08);
  --surface-raised:  rgba(232, 240, 236, 0.16);
  --surface-strong:  rgba(232, 240, 236, 0.22);  /* a raised fill under the pointer */
  --surface-sunken:  #01304F;

  --accent:          #5FB8C0;
  --accent-ink:      #7FCBD1;
  --accent-ink-hover:#A3DCE0;
  --accent-subtle:   rgba(95, 184, 192, 0.20);
  --tint:            rgba(95, 184, 192, 0.18);
  --border-accent:   rgba(127, 203, 209, 0.55);
  --primary-fill:    #5FB8C0;
  --on-primary:      #012A46;
  --on-accent:       #012A46;

  --text:            #E8F0EC;
  --text-body:       #E8F0EC;
  --text-secondary:  #B8C6BF;
  --text-tertiary:   #A6B6AE;  /* 4.8:1 on the bar's glass over the page */

  --border:          rgba(232, 240, 236, 0.12);
  --border-hover:    rgba(232, 240, 236, 0.24);
  --border-strong:   rgba(232, 240, 236, 0.18);
  --overlay-hover:   rgba(232, 240, 236, 0.06);

  color: var(--text);
  color-scheme: dark;
}