/* ============================================================
   Aidapt — Layout: breakpoints & gradients
   ------------------------------------------------------------
   Breakpoints are documentation tokens (CSS custom properties
   can't drive @media directly) — the values the system uses.

   Gradient technique (locked). Every flow surface is built from
   CSS background layers, bottom → top:
     1. DIRECTIONAL LINEAR SWEEP — runs corner-to-corner so the
        whole surface flows (the > "from > to").
     2. OVERSIZED EDGE-ANCHORED BLOOMS (1–3) — each radial centre
        sits ON or BEYOND an edge, sized 60–120%, fading to a
        rgba(c,0) stop. Only a soft falloff enters frame; you
        never see a full circle.
     3. OPTIONAL CENTRE VIGNETTE (dark only) — deepens the edges.
     4. LOCKED TWO-LAYER FILM GRAIN (.has-grain) welds the colour.
   Teal-led; Deep Flow holds the far edge; light bleeds from a
   corner; Ember is a single contained foot (Fire ≤5%). Analogous
   only — never jump cool→warm through purple, never teal→ember.
   ============================================================ */

:root {
  /* ---- Breakpoints (min-width) ---- */
  --bp-xs: 360px;  /* @kind other */
  --bp-sm: 640px;  /* @kind other */
  --bp-md: 768px;  /* @kind other */
  --bp-lg: 1024px; /* @kind other */
  --bp-xl: 1280px; /* @kind other */
  --bp-2xl: 1536px; /* @kind other */

  /* ---- Gradients — diagonal sweep (the workhorse) ---- */
  /* Dark sweep — Deep Flow ground, teal core */
  --grad-sweep-dark: linear-gradient(135deg,
      var(--deepflow-900) 0%, var(--teal-700) 55%, var(--teal-400) 100%);
  /* Medium sweep — teal into cyan luminous core */
  --grad-sweep-medium: linear-gradient(135deg,
      var(--teal-600) 0%, var(--teal-400) 48%, var(--cyan-300) 100%);
  /* Light sweep — frost wash for soft surfaces */
  --grad-sweep-light: linear-gradient(135deg,
      var(--frost-100) 0%, var(--frost-50) 60%, var(--white) 100%);

  /* ---- Flow · Dark — deep-flow → teal sweep, cyan + frost light
     from the top-right, centre vignette deepening the edges. ----- */
  --flow-dark-sweep: linear-gradient(122deg,
      #04212e 0%, #062A3B 34%, #0c5e62 74%, #11A8A0 108%);   /* @kind color */
  --flow-dark-bloom-cyan: radial-gradient(96% 86% at 97% 4%,
      rgba(54,197,224,0.55) 0%, rgba(54,197,224,0) 58%);     /* @kind color */
  --flow-dark-bloom-frost: radial-gradient(64% 58% at 88% -6%,
      rgba(159,238,245,0.42) 0%, rgba(159,238,245,0) 54%);   /* @kind color */
  --flow-dark-vignette: radial-gradient(140% 130% at 50% 50%,
      rgba(2,18,26,0) 38%, rgba(2,18,26,0.60) 100%);         /* @kind color */
  --grad-flow-dark:
      var(--flow-dark-bloom-frost),
      var(--flow-dark-bloom-cyan),
      var(--flow-dark-vignette),
      var(--flow-dark-sweep);

  /* ---- Flow · Medium — frost-led: teal → cyan sweep, frost light
     top-left, deep-teal anchor bottom-right. ------------------- */
  --flow-medium-sweep: linear-gradient(126deg,
      #11A8A0 0%, #36C5E0 70%, #9FEEF5 114%);                /* @kind color */
  --flow-medium-bloom-frost: radial-gradient(92% 86% at 2% 2%,
      rgba(207,246,240,0.85) 0%, rgba(207,246,240,0) 56%);   /* @kind color */
  --flow-medium-bloom-deep: radial-gradient(82% 78% at 104% 106%,
      rgba(6,42,59,0.52) 0%, rgba(6,42,59,0) 58%);           /* @kind color */
  --grad-flow-medium:
      var(--flow-medium-bloom-frost),
      var(--flow-medium-bloom-deep),
      var(--flow-medium-sweep);

  /* ---- Flow · Light — sand-white → frost sweep, cyan light
     top-right, sage lift bottom-left (soft surfaces). --------- */
  --flow-light-sweep: linear-gradient(120deg,
      #F7F2E6 0%, #CFF6F0 72%, #9FEEF5 116%);                /* @kind color */
  --flow-light-bloom-cyan: radial-gradient(80% 74% at 102% -4%,
      rgba(54,197,224,0.28) 0%, rgba(54,197,224,0) 56%);     /* @kind color */
  --flow-light-bloom-sage: radial-gradient(76% 72% at -2% 106%,
      rgba(154,217,197,0.46) 0%, rgba(154,217,197,0) 56%);   /* @kind color */
  --grad-light:
      var(--flow-light-bloom-cyan),
      var(--flow-light-bloom-sage),
      var(--flow-light-sweep);

  /* ---- Bridge — Wood feeds Fire (analogous productive cycle) ----
     Spring → Sage → Sand → Ember sweep @104°; a Spring glow lights
     the top-left, a single contained Ember corner anchors the foot
     (Fire ≤5%). Green→yellow→orange is analogous, so it never muds.
     Never run teal straight into ember; never jump through purple. */
  --bridge-sweep: linear-gradient(104deg,
      #4FD1A5 0%, #9AD9C5 30%, #E8D8B0 64%, #FF8A5B 104%);   /* @kind color */
  --bridge-bloom-spring: radial-gradient(82% 80% at -4% -6%,
      rgba(79,209,165,0.55) 0%, rgba(79,209,165,0) 56%);     /* @kind color */
  --bridge-bloom-ember: radial-gradient(58% 70% at 106% 110%,
      rgba(255,138,91,0.70) 0%, rgba(255,138,91,0) 50%);     /* @kind color */
  --grad-bridge:
      var(--bridge-bloom-ember),
      var(--bridge-bloom-spring),
      var(--bridge-sweep);

  /* ---- Flow · Vertical — light top → dark bottom (sidebar / shells) */
  --grad-flow-vertical: linear-gradient(180deg,
      #9FEEF5 0%,
      #36C5E0 18%,
      #11A8A0 42%,
      #0c5e62 68%,
      #062A3B 86%,
      #04212e 100%);                                         /* @kind color */

  /* ---- Back-compat aliases (older token names) ---- */
  --grad-mesh-dark:   var(--grad-flow-dark);
  --grad-mesh-medium: var(--grad-flow-medium);

  /* ---- Film-grain overlay ----
     Two independent speckle layers welded into the colour through
     the alpha channel: black ~38% + white ~30%, feTurbulence
     fractalNoise baseFrequency 0.85, numOctaves 3, 220×220 tile,
     randomised seeds so the repeat is invisible at hero scale.
     Dithers smooth ramps to fully kill banding on large surfaces. */
  --grain-black: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.62 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23b)'/%3E%3C/svg%3E") /* @kind other */;
  --grain-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='29' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23w)'/%3E%3C/svg%3E") /* @kind other */;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.62 0'/%3E%3C/filter%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='29' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23b)'/%3E%3Crect width='220' height='220' filter='url(%23w)'/%3E%3C/svg%3E") /* @kind other */;
}

/* Utility: weld two-layer film grain over a gradient surface.
   Apply .has-grain to an element with a gradient background.
   --grain-strength (default 1) scales both layers for tuning. */
.has-grain { position: relative; isolation: isolate; }
.has-grain::before,
.has-grain::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  pointer-events: none; border-radius: inherit;
  background-size: 220px 220px;
  mix-blend-mode: soft-light;
}
.has-grain::before { background-image: var(--grain-white); opacity: calc(0.92 * var(--grain-strength, 1)); }
.has-grain::after  { background-image: var(--grain-black); opacity: calc(1 * var(--grain-strength, 1)); }