/* ============================================================================
   Sift — website design tokens.

   This is a DIRECT PORT of the app's "Ember" palette from
   apps/desktop/src/renderer/styles/globals.css. The website and the app must
   read as one product, so every value here is copied, not re-invented. If the
   app's palette changes, change it here too.

   Rules inherited from the app, and they are not negotiable:
     - Chrome stays monochrome. Coral (--primary) is spent on exactly two
       things: the primary CTA and an active/selected state. Never on
       decoration, never on identity.
     - Violet (--ai) means AI, and only AI.
     - Surfaces separate with HAIRLINES, not drop shadows.
     - Radii: controls 8px, cards 12px, thumbs 6px.
   ============================================================================ */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("./fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("./fonts/inter-latin-ext-wght-normal.woff2")
    format("woff2-variations");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "JetBrains Mono Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("./fonts/jetbrains-mono-latin-wght-normal.woff2")
    format("woff2-variations");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- SURFACES. A card is always brighter than the page under it. ---------
     background #0B0A09 lum 10  |  rail    #161413 lum 20
     surface    #201D1B lum 30  |  surface-2 #2E2B28 lum 44                  */
  --background: 24 12% 4%;
  --rail: 24 9% 8%;
  --surface: 24 8% 11.5%;
  --surface-2: 24 7% 17%;
  --border: 28 8% 22%;
  --border-strong: 28 9% 33%;

  /* --- TEXT. Four rungs, assigned strictly by role. ------------------------
     Each rung is >=9 perceived points off its neighbour. Every rung except
     --fg-disabled clears 4.5:1 on --surface.                                */
  --foreground: 30 8% 96%; /* #F5F4F3  headings, primary text       14.9:1 */
  --fg-secondary: 28 4% 76%; /* #C4C1BE  emphasised inline            8.9:1 */
  --muted-foreground: 28 5% 61%; /* #A19B97  ALL body copy and captions   6.1:1 */
  --fg-subtle: 26 6% 56%; /* #968E88  eyebrows, micro-labels       5.2:1 */
  --fg-disabled: 24 6% 33%; /* #59534F  dead controls only           2.1:1 */

  /* --- ACCENT. One saturated hue, spent on ACTION and STATE only. ---------- */
  --primary: 14 100% 62%; /* #FF6A3D  primary CTA + active state, nothing else */
  --primary-lit: 18 100% 65%; /* #FF8A4D  the warm end of the CTA gradient        */
  --primary-foreground: 0 0% 100%;
  --accent-muted: 20 58% 55%; /* #CF764A  the brand mark, eyebrow glyphs + labels */
  --ai: 247 100% 74%; /* #8A7AFF  AI / summarize / whisper ONLY           */
  --success: 158 64% 52%; /* #36D399 */
  --warning: 40 85% 62%; /* #F0B84A */
  --danger: 348 72% 62%; /* #E45874 */
  --ring: 14 100% 62%;

  /* --- SHAPE. --- */
  --r-control: 8px;
  --r-card: 12px;
  --r-thumb: 6px;

  --font-sans:
    "Inter Variable", Inter, -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono:
    "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "SF Mono",
    Consolas, monospace;

  color-scheme: dark;
}

/* ---------------------------------------------------------------------------
   .app-canvas — the atmosphere, ported verbatim from the app.

   ONE warm light source, sitting behind the CONTENT column rather than behind
   the chrome. The total alpha budget is capped so the composited canvas never
   exceeds ~17 perceived brightness anywhere — the card fill is 30, and that
   gap IS the surface hierarchy.

   HARD CONSTRAINTS, learned the expensive way in the app: no filter: blur(),
   no background-attachment: fixed, no animation on this element. All three
   force a full-surface repaint on every frame.
   --------------------------------------------------------------------------- */
.app-canvas {
  background-color: hsl(var(--background));
  background-repeat: no-repeat;
  background-image:
    /* 1. key light, off-frame above the content column */
    radial-gradient(
      72% 60% at 36% -12%,
      hsl(24 74% 52% / 0.042) 0%,
      hsl(22 64% 48% / 0.02) 40%,
      transparent 76%
    ),
    /* 2. wide, low-saturation haze so the falloff isn't a hard disc */
    radial-gradient(
        132% 100% at 42% 0%,
        hsl(26 52% 50% / 0.018) 0%,
        hsl(26 42% 46% / 0.008) 44%,
        transparent 86%
      ),
    /* 3. second ember, centred low — same lamp, lower and dimmer */
    radial-gradient(
        70% 50% at 52% 106%,
        hsl(18 58% 50% / 0.032) 0%,
        hsl(18 48% 46% / 0.012) 44%,
        transparent 80%
      ),
    /* 4. neutral counterweight, right flank — warm-grey, not a second hue */
    radial-gradient(
        60% 76% at 104% 52%,
        hsl(28 10% 62% / 0.028) 0%,
        transparent 74%
      ),
    /* 5. vignette — painted last so the blooms override it where they land */
    radial-gradient(
        126% 104% at 46% 38%,
        transparent 40%,
        hsl(20 30% 2% / 0.32) 78%,
        hsl(20 30% 1% / 0.6) 100%
      );
}

/* ---------------------------------------------------------------------------
   .corner-mark — the app's identity ornament: two opposing corner brackets
   clipping a glyph. Ported from globals.css. Used on the wordmark and,
   sparingly, to frame a hero figure.
   --------------------------------------------------------------------------- */
.corner-mark {
  position: relative;
  --mark-size: 7px;
  --mark-inset: -4px;
  --mark-thickness: 1.5px;
  --mark-color: hsl(var(--accent-muted));
}
.corner-mark::before,
.corner-mark::after {
  content: "";
  position: absolute;
  width: var(--mark-size);
  height: var(--mark-size);
  border-style: solid;
  border-color: var(--mark-color);
  pointer-events: none;
}
.corner-mark::before {
  top: var(--mark-inset);
  left: var(--mark-inset);
  border-width: var(--mark-thickness) 0 0 var(--mark-thickness);
}
.corner-mark::after {
  right: var(--mark-inset);
  bottom: var(--mark-inset);
  border-width: 0 var(--mark-thickness) var(--mark-thickness) 0;
}

/* The 1px top highlight that keeps a translucent control from reading flat. */
.bevel {
  box-shadow: inset 0 1px 0 0 hsl(0 0% 100% / 0.07);
}