/* ============================================================
   Studio — Harness Intelligence brand tokens

   Adapted from the Hi rebrand kit at
   ~/Sync/Hi-Team/Documents/Brand/hi-rebrand-kit/.

   studio.css names roles; this file decides what they mean. Nothing
   in studio.css should hold a colour, a font name, or a radius.

   Two deliberate departures from the kit, both explained where they
   appear below: darkened text shades for small type, and a body
   weight tuned for a dense tool rather than a marketing page.
   ============================================================ */

/* ── Self-hosted webfonts (latin + latin-ext subsets) ─────────
   Variable across the weight axis, so one file covers every weight.
   The kit's fonts.css also imports Oswald from Google for deck
   headlines; Studio has no use for it, and pulling it in would
   reinstate the third-party request self-hosting removes.        */

@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/NotoSerif-latin.woff2') format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/NotoSerif-latin-ext.woff2') format('woff2');
  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: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Roboto-latin.woff2') format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Roboto-latin-ext.woff2') format('woff2');
  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: 'Roboto Mono';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('fonts/RobotoMono-latin.woff2') format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('fonts/RobotoMono-latin-ext.woff2') format('woff2');
  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;
}

:root {
  /* ── Brand palette — straight from the kit ────────────────── */
  --hi-orange:       #F26522;   /* primary — every primary action */
  --hi-orange-press: #D4551A;   /* hover / press */
  --hi-orange-wash:  #FDEBE2;
  --hi-gold:         #F2B840;
  --hi-blue:         #1C75BC;
  --hi-blue-light:   #1B9ED1;
  --hi-green:        #6CBE45;
  --hi-red:          #C32034;

  --hi-ink:          #1A1A1A;
  --hi-graphite:     #333333;
  --hi-slate:        #666666;
  --hi-mute:         #999999;
  --hi-silver:       #BBBCBB;
  --hi-line:         #E0E0E0;
  --hi-cloud:        #F9F9F9;
  --hi-white:        #FFFFFF;

  /* ── Text-safe shades — the one departure from the kit ─────
     The kit's hues are built for graphics and Studio renders them
     at 11px. Measured against their own washes, gold reaches
     1.64:1 and green 2.10:1, where small text needs 4.5:1. These
     darkened shades hold the hue and clear the bar; the raw hues
     above still carry every non-text use — dots, rails, swatches,
     heat cells, borders, fills.                                  */
  --hi-orange-text:  #BD450B;   /* 5.22:1 on white — orange is only 3.15 */
  --hi-gold-text:    #96690A;   /* 4.51:1 on its wash */
  --hi-blue-text:    #1A6EB1;   /* 4.51:1 on its wash */
  --hi-green-text:   #467C2B;   /* 4.55:1 on its wash */
  --hi-red-text:     #C32034;   /* 4.74:1 on its wash — passes as-is */

  /* Washes — each hue mixed 13% into white. */
  --hi-gold-wash:    #FDF6E6;
  --hi-blue-wash:    #E1EDF6;
  --hi-green-wash:   #ECF7E7;
  --hi-red-wash:     #F7E2E5;
  --hi-blue-light-wash: #E1F2F9;

  /* Edges for washed panels — the hue at ~35% into white. */
  --hi-gold-edge:    #F8E4B4;
  --hi-blue-edge:    #B8D4EA;
  --hi-green-edge:   #C9E7BB;
  --hi-red-edge:     #EDBDC3;
  --hi-orange-edge:  #F9C4A7;

  /* ── Surfaces ─────────────────────────────────────────────── */
  --canvas:        var(--hi-cloud);
  --card:          var(--hi-white);
  --surface-alt:   var(--hi-cloud);   /* table heads, inset panels */
  /* Derived, not from the kit: a dense table needs a hover step a
     marketing palette never has to provide. */
  --surface-hover: #F2F2F2;
  --surface-sunk:  #F4F4F4;           /* textareas, wells */

  /* ── Ink ──────────────────────────────────────────────────── */
  --ink:        var(--hi-ink);        /* headings, strong values */
  --body:       var(--hi-graphite);   /* body copy */
  --muted:      var(--hi-slate);      /* secondary — 5.74:1 on white */
  --faint:      #767676;              /* tertiary; the kit's #999 is 2.85:1 */
  --label:      var(--hi-slate);      /* mono eyebrows and column heads */
  --disabled:   var(--hi-silver);

  /* ── Lines ────────────────────────────────────────────────── */
  --border:      var(--hi-line);
  --border-soft: #EDEDED;             /* row dividers inside a card */

  /* ── Brand roles ──────────────────────────────────────────── */
  --accent:       var(--hi-orange);
  --accent-press: var(--hi-orange-press);
  --accent-text:  var(--hi-orange-text);
  --accent-wash:  var(--hi-orange-wash);
  --accent-edge:  var(--hi-orange-edge);
  --on-accent:    var(--hi-white);

  /* ── Status families ──────────────────────────────────────────
     Orange is never a status. It carries actions, so "a thing to
     click" and "a thing to worry about" stay apart.               */
  --current:      var(--hi-green);
  --current-text: var(--hi-green-text);
  --current-wash: var(--hi-green-wash);
  --current-edge: var(--hi-green-edge);

  --behind:       var(--hi-gold);
  --behind-text:  var(--hi-gold-text);
  --behind-wash:  var(--hi-gold-wash);
  --behind-edge:  var(--hi-gold-edge);

  --ahead:        var(--hi-blue);
  --ahead-text:   var(--hi-blue-text);
  --ahead-wash:   var(--hi-blue-wash);
  --ahead-edge:   var(--hi-blue-edge);

  --danger:       var(--hi-red);
  --danger-text:  var(--hi-red-text);
  --danger-wash:  var(--hi-red-wash);
  --danger-edge:  var(--hi-red-edge);

  /* Fill-in chips and the "custom edit" family — blue-light, so
     they read as information rather than as a standing. */
  --info:       var(--hi-blue-light);
  --info-text:  #14759B;              /* 5.19:1 on white */
  --info-wash:  var(--hi-blue-light-wash);
  --info-edge:  #B4DCEC;

  /* Neutral chip — counts, ids, inert tags. */
  --neutral-wash: #F0F0F0;

  /* A session's own block — “yours, not in the master”. A second green,
     held two steps darker than --current so the two read apart on a rail.
     Both also carry an icon and a word; colour is never the only signal. */
  --added:      #2F7D1C;
  --added-text: #2F7D1C;   /* 4.67:1 on its wash */
  --added-wash: #ECF7E7;
  --added-edge: #C9E7BB;

  /* ── Block-card edges ─────────────────────────────────────────
     A block card carries its status twice: a 4px rail and a badge.
     The card's own border stays a hair off neutral — a saturated
     outline on every card turns the hue into decoration, which is
     the one thing the brand rules say the ecosystem palette is not
     for. These sit just far enough from --border to be felt.       */
  --current-card-edge: #E7F5E1;
  --info-card-edge:    #DBEFF8;
  --behind-card-edge:  #FDF4E0;
  --danger-card-edge:  #F5DBDF;
  --added-card-edge:   #DEEADB;

  /* ── The program drift strip ──────────────────────────────────
     One green at rising strength. The text darkens with the fill, or
     it stops clearing 4.5:1 by the third step. Measured, not guessed. */
  --heat-none-bg: #F0F8EC; --heat-none-bd: #D9EECF; --heat-none-fg: #477E2C;
  --heat-low-bg: #DFF1D6; --heat-low-bd: #C7E6B8; --heat-low-fg: #43772A;
  --heat-medium-bg: #CAE8BC; --heat-medium-bd: #B3DD9E; --heat-medium-fg: #3E6E27;
  --heat-high-bg: #B3DD9E; --heat-high-bd: #9BD381; --heat-high-fg: #386523;

  /* ── Type ─────────────────────────────────────────────────────
     The kit sets body at Roboto Light 300 / 1.8. That is a
     marketing-page setting; against fleet tables it costs about a
     third more row height and thins 13px text. Body runs 400 / 1.5
     here. Display and mono follow the kit exactly.                */
  --font-display: 'Noto Serif', Georgia, 'Times New Roman', serif;
  --font-body:    'Roboto', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'Roboto Mono', 'SFMono-Regular', ui-monospace, Menlo, monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  --lh-body:    1.55;
  --lh-heading: 1.2;
  --ls-eyebrow: 0.12em;   /* the kit's 0.18em is loose at 10–11px */
  --ls-label:   0.06em;

  /* ── Shape ────────────────────────────────────────────────── */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   18px;
  --radius-tile: 11px;    /* the logo tile at topbar size */
  --radius-pill: 50px;

  /* ── Depth ────────────────────────────────────────────────── */
  --shadow-card:   0 1px 2px rgba(26, 26, 26, .05);
  --shadow-raised: 0 4px 24px rgba(26, 26, 26, .06);
  --shadow-dialog: 0 24px 64px rgba(26, 26, 26, .24);
  --shadow-button: 0 2px 8px rgba(242, 101, 34, .28);
  --scrim:         rgba(26, 26, 26, .42);
  --glow-current:  0 0 0 3px rgba(108, 190, 69, .18);   /* the halo on a status dot */
  --glow-behind:   0 0 0 3px rgba(242, 184, 64, .22);

  /* ── Focus ────────────────────────────────────────────────────
     Orange on neutral controls. An orange ring vanishes against an
     orange button, so primaries get an ink-and-white double ring
     (see .btn-take:focus-visible in studio.css).

     The ring is the pressed orange, not the brand orange: #F26522 on the
     #F9F9F9 canvas measures 2.99:1, just under the 3:1 a focus indicator
     needs. #D4551A clears it on every surface and still reads as Hi orange. */
  --focus:      var(--hi-orange-press);
  --focus-ring: 0 0 0 3px rgba(212, 85, 26, .35);
}