/* BINBOT web-kit: design tokens.
   Source of truth: the binbot.fun site, src/style.css and src/panels/panels.css at master 35c8917.
   Names are the site's own, so any rule copied from the site works unchanged.
   Load order: fonts/fonts.css, then this file, then your component CSS. Change a value here only through
   coordination/brand-character.md (Inbox); never override a token in a page. */

:root {
  /* ---- Ground and surfaces: black page, near-black panels, hairlines between them ---- */
  --bg: #000;               /* the page. Always pure black */
  --panel: #0b0b0d;         /* dock, dialogs, the $BIN sheet, inputs */
  --surface: #09090b;       /* data panels, post, leaderboard, rule cards */
  --surface-raised: #0e0e10;/* a result that floats over a panel (pool check) */
  --line: #222225;          /* dividers inside a panel */
  --hair: #1d1d21;          /* the one-pixel border of a data panel */
  --hair-input: #2c2c30;    /* field and tag borders */
  --hair-soft: rgba(255, 255, 255, 0.12); /* pill and dock borders over black */
  --hair-strong: #242428;   /* between --hair and --hair-input: diagram strokes, chart axes, the sheet's outline */
  --white: #fff;            /* pure white: hover fills and sheen highlights only. Text uses --off-white or --ink */

  /* ---- Component surfaces: the fills the components used as literals. Use these, never a hex ---- */
  --field-bg: #161618;      /* a field on the phone dock */
  --field-border: #2a2a2e;  /* that field's border */
  --avatar-bg: #120a0a;     /* behind the BINBOT avatar crop */
  --sheet-line: #242427;    /* the $BIN sheet's outline */
  --tile-bg: #141215;       /* the droplet tile */
  --swap-bg: #0f0f12;       /* the swap box inside the sheet */
  --swap-line: #1f1f23;
  --row-bg: #141417;        /* a row inside the swap box */
  --chip-bg: #1d1d21;       /* token chip inside a row */
  --amt-dim: #57534f;       /* an empty amount */
  --join-bg: #121215;       /* the email pill inside the sheet */
  --disabled-a: #18171a;    /* the disabled button's two stripes */
  --disabled-b: #1b1a1d;
  --warn-ink: #ffd2a1;      /* text on the amber warning */
  --sol-purple: #9945FF;    /* the Solana mark, third-party colours */
  --sol-green: #14F195;
  --sol-disc: #111114;

  /* ---- Ink: text on black. Never pure white for body text ---- */
  --off-white: #f9f9fb;     /* poster lines, card text, wordmark */
  --ink: #f2eee8;           /* page text and primary buttons */
  --ink-2: #b3aea6;         /* secondary text. 9.6:1 on black */
  --ink-3: #8e8982;         /* tertiary text. 5.9:1 on black: the floor for any text */
  --ink-on-ink: #0a0a0a;    /* text on a cream button */

  /* ---- The signal: one orange per screen. The gradient is the brand's edge, used sparingly ---- */
  --gold: #F5BD00;          /* gradient start */
  --orange: #F54B00;        /* gradient middle */
  --violet: #6E45FF;        /* gradient end. Only 4.0:1 on black, so never for text, lines or labels: use --violet-ink */
  --violet-ink: #B98BFF;    /* violet readable on black: 8.2:1. Lines, labels and links. Same hue family, not a gradient stop */
  --gradient: linear-gradient(115deg, #F5BD00, #F54B00 48%, #6E45FF);   /* edges and rims */
  --gradient-drop: linear-gradient(180deg, #F5BD00 0%, #F54B00 55%, #6E45FF 100%); /* the droplet, top to bottom */
  --mine: #ff8a1f;          /* BINBOT's own range, rule and position inside a panel. This is the orange signal */
  --amber: #ffb15a;         /* not-live, soon, new rule, warnings */
  --amber-ink: #ffc27a;     /* text on an amber tint */

  /* ---- Data colours: meaning only. Mint is up, kept, pass. Coral is down, skipped, error ---- */
  --mint: #4fe3a0;
  --mint-line: rgba(79, 227, 160, 0.45);
  --mint-tint: rgba(79, 227, 160, 0.06);
  --coral: #ff8a7a;
  --coral-ink: #ff9d8f;     /* coral text on a tint */
  --coral-line: rgba(255, 138, 122, 0.5);
  --bin-sol: #5d6b80;       /* liquidity bins: the SOL side */
  --bin-tok: #82776d;       /* liquidity bins: the token side */
  --usdc: #2775CA;          /* the USDC segment (treasury bar). Fill only: 4.5:1 on black, use --ink on top for labels */

  /* ---- The SAMPLE tag: any figure that is not live carries it. Geist Sans 500 at the 12px floor, hairline, no fill ---- */
  --sample-ink: var(--ink-3);
  --sample-border: #2c2c31;
  --sample-font: 500 12px 'Geist Sans', system-ui, sans-serif;
  --sample-tracking: 0.08em;

  /* ---- Series 01 card, variant B: orange-to-violet body, gradient rim, dark arch ---- */
  --card-body: linear-gradient(168deg, #a8460c 0%, #8a2d10 30%, #5a1f4c 66%, #2f1a78 100%);
  --card-rim: linear-gradient(160deg, #ff9a3c 0%, #f2445e 52%, #7a4dff 100%);
  --card-shade: linear-gradient(172deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 100%);
  --card-arch: radial-gradient(120% 90% at 50% 30%, #1a0e12, #060306);
  --seal-paper: radial-gradient(circle at 38% 32%, #fff2dc, #f3d6b0 75%);
  --seal-ink: #7a2a0a;

  /* ---- Type families. Archivo wide caps for poster lines and the wordmark ONLY ---- */
  --display: 'Parkinsans', 'Geist Sans', system-ui, sans-serif; /* headlines, weight 600 */
  --body: 'Geist Sans', system-ui, sans-serif;                    /* everything you read */
  --mono: 'Geist Mono', ui-monospace, monospace;                  /* figures only: numbers, prices, addresses, times. Never words */
  --wide: 'Archivo Variable', var(--body);                        /* use with font-stretch: 125%, weight 700 to 900 */
  --jp-serif: 'Noto Serif JP', serif;                             /* the 済 seal and quiet Japanese touches */
  --jp-sans: 'Noto Sans JP', sans-serif;

  /* ---- Type sizes by role (desktop). Phone values sit beside each ---- */
  --fs-poster: 48px;                      /* Archivo 800, 125%, caps. 701 to 1279px wide: --fs-poster-mid. Phone 25px */
  --fs-h1: 64px;                          /* Parkinsans 600, line-height 0.98, tracking -0.032em. 701 to 1279px wide: --fs-h1-mid. Phone 33px */
  --fs-h2: 42px;                          /* Parkinsans 600, line-height 1.04. 701 to 1279px wide: --fs-h2-mid. Phone 27px */
  --fs-lede: 18px;                        /* Geist 400, line-height 1.5, ink-2. Phone 15px */
  --fs-hero: 76px;                        /* Geist Mono 500, the one big figure in a panel. Phone 48px */
  --fs-big: 34px;                         /* Geist Mono 500, a second figure. Phone 24px */
  --fs-say: 16px;                         /* a panel's explaining line. Phone 14px */
  --fs-say-lead: 24px;                    /* the lead line of BINBOT's answer in the app. Phone 20px */
  --fs-card-title: 28px;                  /* the pool card's title in the app. Phone 24px */
  --fs-row: 15px;                         /* Geist Mono value in a row */
  --fs-label: 14px;                       /* a label a figure needs to be read: Geist Sans, sentence case, no tracking */
  --fs-small: 13px;                       /* captions and keys */
  --fs-src: 12px;                         /* sources and footnotes, at the 12px floor */
  --fs-button: 15px;                      /* buttons, weight 600 */
  --fs-fig: 12px;                         /* dense diagram labels, Geist Mono. 12px is the floor for figures and labels: never smaller */
  /* headline steps between phone and desktop (701 to 1279px wide), whole pixels instead of a vw clamp */
  --fs-poster-mid: 40px;
  --fs-h1-mid: 52px;
  --fs-h2-mid: 36px;
  /* phone values, same roles as above (the 700px breakpoint and below) */
  --fs-poster-phone: 25px;
  --fs-h1-phone: 33px;
  --fs-h2-phone: 27px;
  --fs-lede-phone: 15px;
  --fs-hero-phone: 48px;
  --fs-big-phone: 24px;
  --fs-say-phone: 14px;
  --fs-say-lead-phone: 20px;
  --fs-card-title-phone: 24px;
  --tracking-h: -0.032em;                 /* headline tracking */
  --tracking-label: 0.08em;               /* unused by the kit's components since 1 Nov; kept for pages that still track a label */

  /* ---- Layout ---- */
  --edge: 56px;             /* page gutter. Phone: --edge-phone */
  --edge-phone: 20px;       /* page gutter on a phone */
  --gap: 28px;              /* vertical rhythm inside a panel. Phone 16px */
  --pad-panel: 28px;        /* padding of a data panel. 24px for a card inside a pair */
  --tap: 44px;              /* smallest touch target */
  --field-h: 56px;          /* the dock's pill height. Phone fields 48px */

  /* ---- Radii: one panel radius (14px) for every document surface ---- */
  --r: 14px;                /* data panel, post, leaderboard, rule card, phone fields and buttons */
  --r-pill: 999px;          /* buttons, the email field, chips, switches */
  --r-input: 10px;          /* small inline fields */
  --r-tag: 6px;             /* SAMPLE tag and pills */
  --r-sheet: 24px;          /* the $BIN sheet and dialogs */
  --r-swap: 20px;           /* the swap box inside the sheet */
  --r-row: 15px;            /* a row inside the swap box */
  --r-tile: 16px;           /* the droplet tile */
  --r-card: 22px;           /* the Series 01 card at dialog size */
  --r-console: 30px;        /* the app console once it grows past one line: half its 60px single-line height, so the corners match the pill it grew from */

  /* ---- Hairlines: borders are 1px and nearly invisible. Never a heavy border ---- */
  --hairline: 1px solid var(--hair);
  --hairline-rim: 1.25px;   /* the gradient rim on the Series 01 card */
  --focus: 2px solid var(--ink); /* focus ring, offset 3px */

  /* ---- Shadows: depth comes from glow in the brand colour, not grey drop shadows ---- */
  --shadow-card: 0 30px 60px -30px rgba(245, 75, 0, 0.45);
  --shadow-sheet: 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.02), 0 30px 80px -50px rgba(245, 75, 0, 0.6);
  --shadow-seal: 0 0 0 3px rgba(255, 236, 214, 0.18), 0 10px 24px -10px rgba(0, 0, 0, 0.6);
  --shadow-float: 0 -20px 40px #000;

  /* ---- Buy $BIN key: two materials, one per width. Lacquer under 720px (the phone dock), Ember at 720px and up.
          Reference: reference/buy-key/. One light from above, no outer glow, depth from inset light and a tight black shadow ---- */
  --buy-ink: #1a0700;                     /* the label and coin icon on both keys. 5.3:1 on Ember's label zone, higher on Lacquer */
  --buy-lacquer-body: radial-gradient(120% 80% at 50% -28%, rgba(255, 238, 220, 0.55), rgba(255, 238, 220, 0) 62%), linear-gradient(180deg, #ff6318 0%, #f34a00 50%, #d03a00 100%); /* enamel: gloss on the top third, shade at the foot */
  --buy-lacquer-shadow: inset 0 1px 0 rgba(255, 228, 204, 0.72), inset 0 -4px 6px -2px rgba(96, 20, 0, 0.5), inset 0 0 0 1px rgba(134, 32, 0, 0.7), 0 0 0 1px #000, 0 3px 8px -2px rgba(0, 0, 0, 0.8);
  --buy-lacquer-pressed: inset 0 1px 0 rgba(255, 228, 204, 0.3), inset 0 2px 6px rgba(96, 20, 0, 0.5), inset 0 0 0 1px rgba(134, 32, 0, 0.8), 0 0 0 1px #000;
  --buy-lacquer-lift: radial-gradient(120% 90% at 50% -10%, rgba(255, 242, 228, 0.34), rgba(255, 242, 228, 0.08) 72%); /* hover light, faded in over the body */
  --buy-lacquer-chip: linear-gradient(180deg, #2b0c02, #170500);  /* Soon: a dark enamel inlay */
  --buy-lacquer-chip-ink: #ffc8a3;        /* 11:1 on the inlay */
  --buy-lacquer-chip-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 222, 198, 0.42);
  --key-gold-icon: rgba(42, 24, 0, 0.88);         /* an icon on the gold key (the add-me icon on JOIN WAITLIST) */
  --key-gold-icon-hi: rgba(255, 240, 170, 0.7);   /* its 1 px lit lower edge */
  --key-cream-icon: rgba(27, 23, 16, 0.88);       /* the same icon once the key has turned cream */
  --key-cream-icon-hi: rgba(255, 255, 255, 0.7);
  --buy-ember-body: linear-gradient(180deg, #ffa31f 0%, #ff7c14 26%, #f75300 56%, #cc3308 100%); /* the one gradient fill the kit allows: gold lip, Meteora orange under the label, deep red-orange foot */
  --buy-ember-shadow: inset 0 1px 0 rgba(255, 242, 204, 0.8), inset 0 0 0 1px rgba(255, 196, 120, 0.2), inset 0 -3px 5px -2px rgba(110, 14, 0, 0.45), 0 0 0 1px #000, 0 3px 8px -2px rgba(0, 0, 0, 0.8);
  --buy-ember-pressed: inset 0 1px 0 rgba(255, 242, 204, 0.35), inset 0 2px 6px rgba(110, 14, 0, 0.45), 0 0 0 1px #000;
  --buy-ember-lift: linear-gradient(180deg, rgba(255, 226, 150, 0.26), rgba(255, 226, 150, 0) 70%);
  --buy-ember-chip-ink: #2a0b00;          /* Soon on Ember is set in ink, after a hairline rule */
  --buy-ember-chip-rule: rgba(26, 7, 0, 0.3);

  /* ---- Visor black: the card material, from BINBOT's visor band. David picked 30% strength, 31 Oct ---- */
  --vb-edge: rgba(255, 255, 255, 0.027);  /* 1px highlight along the top edge */
  --vb-rim: rgba(255, 255, 255, 0.018);   /* faint outline, replaces the grey border */
  --vb-glow: rgba(255, 255, 255, 0.015);  /* soft light from above */
  --vb-top: #0a0a0c;                      /* top of the surface ramp (surface-raised at 30%) */
  --vb-bg: radial-gradient(120% 60% at 50% 0%, var(--vb-glow), transparent 60%), linear-gradient(180deg, var(--vb-top), var(--surface) 55%, var(--bg));
  --vb-shadow: inset 0 1px 0 var(--vb-edge), inset 0 0 0 1px var(--vb-rim), 0 0 0 1px var(--bg), 0 30px 60px -30px var(--bg);

  /* ---- OLED matrix: the dot-matrix screen (components/oled-matrix.html). A lit pixel, the light it bleeds, an unlit pixel; the bar behind it ---- */
  --oled-amber: #f7bb73;                  /* a lit pixel, the quiet look */
  --oled-amber-glow: rgba(255, 140, 40, 0.6);   /* the light the quiet look bleeds into the glass */
  --oled-amber-hot: #ffe2b4;              /* a lit pixel, the answer */
  --oled-amber-hot-glow: rgba(255, 150, 50, 0.85); /* the answer's wider bleed */
  --oled-unlit: rgba(255, 176, 90, 0.085); /* an unlit pixel: the screen is a screen even where it says nothing */
  --oled-bar-glow: rgba(255, 150, 60, 0.13);     /* warm light behind the bar, centre */
  --oled-bar-glow-mid: rgba(255, 150, 60, 0.04); /* the same light at 55% */
  --oled-bar-glow-out: rgba(255, 150, 60, 0);    /* and gone at 78% */
  --oled-bar-top: #1c150e;                /* the bar's backdrop, top to foot */
  --oled-bar-mid: #100b08;
  --oled-bar-low: #0a0705;
  --oled-bar-foot: #140f0a;
  /* the black look (David, 1 Nov: "a version that isn't so brown... the visor itself a little bit more black"):
     the same lit amber on a neutral visor-black glass, a grey unlit grid and no warm light behind it */
  --oled-black-bar-top: #0b0b0c;
  --oled-black-bar-mid: #060607;
  --oled-black-bar-low: #030303;
  --oled-black-bar-foot: #09090a;
  --oled-black-unlit: rgba(255, 255, 255, 0.05);
  /* colours on the black glass, by meaning (David, 1 Nov: "use different colors... to manage tension or dynamic elements").
     Amber is BINBOT's voice; mint is in range, paid, kept; coral is out of range, a loss, tension; violet is the brand moment; ice is neutral */
  --oled-mint: #8ff5c6;
  --oled-mint-glow: rgba(79, 227, 160, 0.6);
  --oled-coral: #ffb0a4;
  --oled-coral-glow: rgba(255, 110, 90, 0.65);
  --oled-violet: #d2bcff;
  --oled-violet-glow: rgba(140, 100, 255, 0.7);
  --oled-ice: #eef2f7;
  --oled-ice-glow: rgba(200, 220, 255, 0.45);

  /* ---- Motion: one curve everywhere, calm, no loop faster than 8 s ---- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);   /* every transition and entrance */
  --ease-pop: cubic-bezier(0.2, 0.9, 0.25, 1); /* the sheet growing from Buy */
  --ease-press: cubic-bezier(0.3, 0.7, 0.2, 1); /* the seal pressed onto the card */
  --dur-fast: 0.18s;        /* chips */
  --dur: 0.22s;             /* buttons, borders, focus */
  --dur-slow: 0.3s;         /* hover glow, fades */
  --dur-sheet: 0.34s;       /* sheet in. Phone 0.38s */
  --dur-enter: 0.7s;        /* header and dock rising in at load */
  --dur-flip: 0.64s;        /* the card flip */
  --dur-sweep: 9s;          /* the light crossing Join. Buy starts 4.5s later */
}