/* ============================================================================
   Bento Navy·Lime — the only stylesheet.
   Token sheet (:root) + base type + the bento component layer.
   Link from every page:  <link rel="stylesheet" href="styles.css">
   Never hard-code a hex, a font name or a px value the tokens already carry.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Inter:wght@400;500;600&display=swap");

:root{
  color-scheme: dark;                      /* navy is the ground, not a theme */

  /* ── Roles ─────────────────────────────────────────────────────────────
     Navy carries structure (ground, tiles, rules). Lime is the only accent
     that fills — it marks exactly one thing per grid. Azure is the second
     voice, used for series and links, never for emphasis.                */
  --color-bg:        #0A1120;   /* page ground — deepest navy */
  --color-surface:   #121C30;   /* tile fill */
  --color-surface-2: #18243C;   /* nested/sunken fill inside a tile */
  --color-text:      #E9EEF8;
  --color-muted:     #9BABC6;   /* 7.6:1 on --color-surface — safe for body copy */
  --color-divider:   color-mix(in srgb, #E9EEF8 12%, transparent);
  --color-hairline:  color-mix(in srgb, #E9EEF8 18%, transparent);

  --color-accent:    #C6F24E;   /* lime */
  --color-accent-ink:#0A1120;   /* type on a lime fill */
  --color-accent-2:  #5B8DEF;   /* azure */

  /* ── Ramps — 100 lightest … 900 darkest, 500 is the role's base ─────── */
  --color-neutral-100:#E9EEF8; --color-neutral-200:#CBD7EA;
  --color-neutral-300:#A7B8D4; --color-neutral-400:#7E93B5;
  --color-neutral-500:#5A7096; --color-neutral-600:#40557A;
  --color-neutral-700:#2B3D5C; --color-neutral-800:#1A2740;
  --color-neutral-900:#0F1728;

  --color-accent-100:#F5FDE0; --color-accent-200:#EAFBC0;
  --color-accent-300:#DCF894; --color-accent-400:#D1F56F;
  --color-accent-500:#C6F24E; --color-accent-600:#A8D62B;
  --color-accent-700:#85AC1E; --color-accent-800:#618016;
  --color-accent-900:#3F5411;

  --color-accent-2-100:#E6EEFE; --color-accent-2-200:#C9DBFD;
  --color-accent-2-300:#A3C0FA; --color-accent-2-400:#7EA6F5;
  --color-accent-2-500:#5B8DEF; --color-accent-2-600:#3F6ED0;
  --color-accent-2-700:#2E53A3; --color-accent-2-800:#223C77;
  --color-accent-2-900:#17284E;

  /* ── Type ──────────────────────────────────────────────────────────── */
  --font-heading:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-heading-weight:700;
  --font-body:"Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Spacing ───────────────────────────────────────────────────────── */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-12:48px;

  /* ── Radius — the large radius is the bento signature. Under 16px the
        pattern reads as a plain card grid, so nothing structural goes
        below --radius-md.                                               */
  --radius-sm:10px; --radius-md:16px; --radius-lg:24px; --radius-xl:32px;

  /* ── Elevation — on a navy ground a cast shadow barely reads, so tiles
        are separated by the hairline first and lifted only on hover.    */
  --shadow-sm:0 1px 2px color-mix(in srgb, #000 40%, transparent);
  --shadow-md:0 6px 18px color-mix(in srgb, #000 45%, transparent);
  --shadow-lg:0 18px 44px color-mix(in srgb, #000 55%, transparent);
  --glow-accent:0 0 0 1px var(--color-accent), 0 10px 30px color-mix(in srgb, var(--color-accent) 18%, transparent);

  /* ── Bento geometry ────────────────────────────────────────────────────
     Four tracks keep span variety without chaos; a fixed row unit makes
     spans predictable. The gutter is half the tile padding.             */
  --bento-cols:4;
  --bento-row:180px;
  --bento-gap:var(--space-4);   /* 16px — below 8 tiles merge, above 32 they fragment */
  --bento-pad:var(--space-6);   /* 24px */
  --bento-radius:var(--radius-lg);

  /* ── Motion ────────────────────────────────────────────────────────── */
  --ease:cubic-bezier(.2,.6,.2,1);
  --dur:180ms;                  /* 150–250ms: content reveal, not ornament */
}

/* ── Base ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; background:var(--color-bg); color:var(--color-text);
  font-family:var(--font-body); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--font-heading); font-weight:var(--font-heading-weight);
  line-height:1.1; letter-spacing:-0.02em; margin:0; }
a{ color:var(--color-accent-2-300); text-underline-offset:3px; }
::selection{ background:color-mix(in srgb, var(--color-accent) 35%, transparent); }
:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; border-radius:var(--radius-sm); }

/* ============================================================================
   BENTO
   .bento            the tray — a fixed track grid, one gutter, never nested
   .bento-tile       the cell — one idea each, readable in any order
   spans             .bento-hero (2×2) · .bento-wide (2×1) · .bento-tall (1×2)
                     everything else is 1×1
   ========================================================================== */

.bento{
  display:grid;
  grid-template-columns:repeat(var(--bento-cols), minmax(0,1fr));
  grid-auto-rows:var(--bento-row);
  gap:var(--bento-gap);
}

.bento-tile{
  position:relative;
  display:flex; flex-direction:column; justify-content:space-between;
  gap:var(--space-3);
  min-width:0; overflow:hidden;
  padding:var(--bento-pad);
  background:var(--color-surface);
  border:1px solid var(--color-divider);
  border-radius:var(--bento-radius);
  color:var(--color-text);
}

/* Spans — area is the hierarchy. Exactly one hero per tray. */
.bento-hero{ grid-column:span 2; grid-row:span 2; }
.bento-wide{ grid-column:span 2; }
.bento-tall{ grid-row:span 2; }
.bento-hero .bento-title{ font-size:clamp(28px,3.2vw,44px); }

/* Fills — lime fills exactly one tile per tray; everything else is navy. */
.bento-accent{
  background:var(--color-accent); border-color:var(--color-accent);
  color:var(--color-accent-ink);
}
.bento-accent .bento-kicker,
.bento-accent .bento-body,
.bento-accent .bento-meta{ color:color-mix(in srgb, var(--color-accent-ink) 72%, transparent); }
.bento-outline{ background:transparent; border-color:var(--color-accent); }
.bento-sunken{ background:var(--color-neutral-900); }
.bento-quiet{ background:transparent; border-style:dashed; border-color:var(--color-divider); }

/* Tile content */
.bento-kicker{
  font-size:11px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--color-muted);
}
.bento-title{ font-family:var(--font-heading); font-size:19px; letter-spacing:-0.01em; }
.bento-body{ font-size:13.5px; color:var(--color-muted); margin:0; }
.bento-metric{
  font-family:var(--font-heading); font-size:clamp(30px,3.4vw,52px);
  line-height:1; letter-spacing:-0.03em; font-variant-numeric:tabular-nums;
}
.bento-metric .unit{ font-size:.42em; color:var(--color-muted); margin-left:.25em; letter-spacing:0; }
.bento-delta{ font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--color-accent); }
.bento-delta.is-down{ color:var(--color-accent-2-300); }
.bento-meta{
  display:flex; align-items:center; gap:var(--space-2);
  font-size:12px; color:var(--color-muted);
}
.bento-spec{ font-family:var(--font-mono); font-size:12px; color:var(--color-muted); }
.bento-tick{ width:26px; height:3px; background:var(--color-accent); border-radius:2px; }

/* Media tiles — a scrim is mandatory under type on imagery (WCAG 1.4.3) */
.bento-media{ padding:0; }
.bento-media img,.bento-media .fill{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.bento-media .bento-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, color-mix(in srgb, #000 62%, transparent) 0%, transparent 62%);
}
.bento-media .bento-caption{
  position:relative; z-index:2; margin-top:auto; padding:var(--bento-pad);
}

/* Interaction — hover lifts, focus rings, both opt-in via a link/button tile */
a.bento-tile,button.bento-tile,.bento-tile.is-interactive{
  cursor:pointer; text-decoration:none; text-align:left; font:inherit;
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
a.bento-tile:hover,button.bento-tile:hover,.bento-tile.is-interactive:hover{
  transform:scale(1.02); border-color:var(--color-hairline); box-shadow:var(--shadow-md);
}
a.bento-tile:active,button.bento-tile:active,.bento-tile.is-interactive:active{ transform:scale(1); }
a.bento-tile:focus-visible,button.bento-tile:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; }
.bento-tile[aria-disabled="true"]{ opacity:.45; pointer-events:none; }

@media (prefers-reduced-motion: reduce){
  a.bento-tile,button.bento-tile,.bento-tile.is-interactive{ transition:none; }
  a.bento-tile:hover,button.bento-tile:hover,.bento-tile.is-interactive:hover{ transform:none; }
}

/* ── Tray variants ─────────────────────────────────────────────────────── */

/* Dense — backfills holes. Media only: it reorders cells visually while the
   screen reader follows DOM order, so never on interactive tiles (WCAG 2.4.3). */
.bento-dense{ grid-auto-flow:dense; }

/* Fluid — no fixed track count; tiles claim a minimum and share the rest. */
.bento-fluid{ grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); }

/* Seam — one hairline instead of a gutter. Tiles lose their own radius and
   the tray carries it, so the block reads as a single slab. */
.bento-seam{
  gap:1px; background:var(--color-divider);
  border:1px solid var(--color-divider); border-radius:var(--bento-radius); overflow:hidden;
}
.bento-seam .bento-tile{ border:0; border-radius:0; }

/* Twelve — the fine grid, for 3-tier span systems (6×4 / 3×4 / 3×2). */
.bento-12{ --bento-cols:12; --bento-row:56px; }
.bento-12 .t-primary  { grid-column:span 6; grid-row:span 4; }
.bento-12 .t-secondary{ grid-column:span 3; grid-row:span 4; }
.bento-12 .t-tertiary { grid-column:span 3; grid-row:span 2; }

/* Dashboard — the four-tier KPI tray on twelve tracks. */
.bento-dash{ --bento-cols:12; --bento-row:88px; }
.bento-dash .t1{ grid-column:span 5; grid-row:span 2; }   /* hero KPI — max two */
.bento-dash .t2{ grid-column:span 4; grid-row:span 2; }   /* supporting context */
.bento-dash .t3{ grid-column:span 3; grid-row:span 1; }   /* secondary KPI */
.bento-dash .t4{ grid-column:span 2; grid-row:span 1; }   /* action / alert */

/* Editorial — named areas. The layout is legible in the code itself, which is
   why it is the right tool when a tray must be re-cut per breakpoint. */
.bento-editorial{
  grid-template-columns:repeat(6,minmax(0,1fr));
  grid-auto-rows:118px;
  grid-template-areas:
    "hero hero hero hero side side"
    "hero hero hero hero side side"
    "a    a    b    b    c    c";
}
.bento-editorial .a-hero{ grid-area:hero; }
.bento-editorial .a-side{ grid-area:side; }
.bento-editorial .a-a{ grid-area:a; }
.bento-editorial .a-b{ grid-area:b; }
.bento-editorial .a-c{ grid-area:c; }

/* Anchor — one cell at twice the area of the largest supporting cell, with
   two columns of smaller cells beside it. */
.bento-anchor{ --bento-cols:4; --bento-row:150px; }
.bento-anchor .t-anchor{ grid-column:span 2; grid-row:span 3; }

/* Specs — many parallel facts of equal weight, no hero. */
.bento-specs{ --bento-cols:6; --bento-row:104px; }
.bento-specs .bento-tile{ padding:var(--space-4); gap:var(--space-1); justify-content:center; }
.bento-specs .bento-metric{ font-size:24px; }

/* ── Responsive ────────────────────────────────────────────────────────────
   Re-cut, don't shrink. Tablet halves the tracks and lets the hero span the
   full width; phone stacks and drops every span so nothing lands orphaned. */
@media (max-width:1000px){
  .bento-editorial{
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-areas:
      "hero hero hero hero"
      "hero hero hero hero"
      "side side a    a"
      "b    b    c    c";
  }
  .bento-12,.bento-dash{ --bento-cols:6; }
  .bento-12 .t-primary{ grid-column:span 6; }
  .bento-12 .t-secondary,.bento-12 .t-tertiary{ grid-column:span 3; }
  .bento-dash .t1,.bento-dash .t2{ grid-column:span 6; }
  .bento-dash .t3{ grid-column:span 3; }
  .bento-dash .t4{ grid-column:span 2; }
  .bento-specs{ --bento-cols:3; }
}
@media (max-width:760px){
  .bento{ --bento-cols:2; --bento-pad:var(--space-5); }
  .bento-hero{ grid-column:span 2; grid-row:span 2; }
  .bento-anchor .t-anchor{ grid-column:span 2; grid-row:span 2; }
  .bento-editorial{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:"hero hero" "hero hero" "side side" "a b" "c c";
  }
}
@media (max-width:520px){
  .bento,.bento-12,.bento-dash,.bento-specs,.bento-anchor{
    --bento-cols:1; --bento-row:auto; --bento-radius:var(--radius-md);
  }
  .bento-fluid{ grid-template-columns:1fr; }
  .bento-tile{ min-height:132px; }
  .bento-hero,.bento-wide,.bento-tall,
  .bento-12 .t-primary,.bento-12 .t-secondary,.bento-12 .t-tertiary,
  .bento-dash .t1,.bento-dash .t2,.bento-dash .t3,.bento-dash .t4,
  .bento-anchor .t-anchor{ grid-column:auto; grid-row:auto; }
  .bento-editorial{ grid-template-columns:1fr; grid-template-areas:"hero" "side" "a" "b" "c"; }
}