/* KRYPHS design tokens. Redesign "Departures board", 2026-10-03.
   The ONLY file that defines colour values and font stacks: every other stylesheet reads these custom
   properties, and tools/check.js fails the build on a hex, rgb() or hsl() colour anywhere else.
   The page is a cool paper (light) or a night terminal (dark). The board is always the same dark object.
   Fonts are self-hosted in /assets/fonts (SIL Open Font License, see fonts/LICENSES.txt).
   Sora is kept for the wordmark only. */
@layer tokens, base, components, sections, utilities;

@font-face{font-family:'Sora';font-style:normal;font-weight:500 800;font-display:swap;src:url('/assets/fonts/sora-latin.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;src:url('/assets/fonts/bricolage-grotesque-latin.woff2') format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/geist-latin.woff2') format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/geist-mono-latin.woff2') format('woff2')}
/* metric-matched fallbacks, so the page does not jump when the web font arrives */
@font-face{font-family:'Bricolage Fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Arial');font-weight:500 800;size-adjust:89.6%;ascent-override:103.8%;descent-override:30.1%;line-gap-override:0%}
@font-face{font-family:'Geist Fallback';src:local('Arial');font-weight:100 900;size-adjust:99.8%;ascent-override:101.2%;descent-override:30.1%;line-gap-override:0%}
@font-face{font-family:'Geist Mono Fallback';src:local('Courier New');font-weight:100 900;size-adjust:100%;ascent-override:101%;descent-override:30%;line-gap-override:0%}

@layer tokens{
  :root{
    /* brand, the same in both themes */
    --ink:#0A0F1C; --paper:#F2F4F9; --white:#FFFFFF;
    --accent:#3366FF; --on-accent:#FFFFFF; --accent-soft:#8AA8FF; --accent-bright:#5C85FF; --accent-deep:#1F3FAD;

    /* the board: one dark object, identical in both themes */
    --board:#070C19; --board-rail:#0B1224; --board-rim:#1C2642; --board-rule:#141D35;
    --blade-top:#1A233B; --blade-bot:#131B30; --blade-edge:#232E4C; --blade-hinge:#02050B;
    --blade-ink:#F1F4FB; --blade-dim:#8693B1; --blade-faint:#56627F;
    --lamp-go:#2FD4A0; --lamp-warn:#FFB84D; --lamp-stop:#FF5D63; --lamp-new:#7398FF; --lamp-off:#3A4562;

    /* the KRYPHS app, drawn as an example on / and /product/ (app.css). Like the board, it is one object that
       looks the same in both page themes: a dark navy side bar around a light work area */
    --app-side:#0A1020; --app-side-raise:#131C33; --app-side-line:#1E2945; --app-side-text:#B3BDD4; --app-side-dim:#8792AD;
    --app-page:#F5F7FB; --app-card:#FFFFFF; --app-col:#EDF0F6; --app-line:#E1E6F0; --app-line-strong:#C3CBDD;
    --app-ink:#0B1120; --app-muted:#4F5A74; --app-blue-text:#2850D6; --app-blue-wash:#E6ECFF; --app-ring:#B8C8FF;
    --app-grey-bg:#E6E9F1; --app-grey-text:#46506B;
    --app-amber-bg:#FBEBD0; --app-amber-text:#7F4B00;
    --app-orange-bg:#FFE4D3; --app-orange-text:#9A410D;
    --app-green-bg:#D8F2E6; --app-green-text:#0F6B44;
    --app-red-bg:#FCE4E5; --app-red-text:#B02A31;
    --app-hero-a:#09112A; --app-hero-b:#1D3FA8; --app-cream:#F4EFE6;
    /* creative thumbnails drawn in CSS (the Overview hero): five warm and cool gradients, never a photo */
    --app-tile-1a:#F2B15A; --app-tile-1b:#B4491F; --app-tile-2a:#59A9C4; --app-tile-2b:#1D4C73; --app-tile-3a:#B77AD0; --app-tile-3b:#47286E;
    --app-tile-4a:#6FD3A8; --app-tile-4b:#1E6B5A; --app-tile-5a:#F08A8F; --app-tile-5b:#8E2F4E;

    /* panels used by the booking dialog and the deck */
    --panel:#0A1124; --panel-2:#101A33; --panel-line:#22325C; --panel-text:#EEF2FB; --panel-muted:#9DABCB;
    --good-on-panel:#2FD4A0; --bad:#D93D42;

    /* page, light by default */
    --bg:var(--paper); --bg-2:#E8ECF5; --surface:var(--white); --surface-2:#F6F8FC;
    --line:#DAE0EE; --line-strong:#C2CBE0;
    --text:var(--ink); --muted:#4A5470; --accent-text:#2850D6;
    --good:#13774C; --warn:#8A5300;
    --selection:#C9D6FF;

    /* derived with color-mix() */
    --accent-wash:color-mix(in srgb, var(--accent) 8%, var(--surface));
    --control-line:color-mix(in srgb, var(--muted) 62%, var(--line));
    --bad-text:color-mix(in srgb, var(--bad) 72%, var(--text));
    --focus-ring:var(--accent);
    --shadow-ink:color-mix(in srgb, var(--ink) 55%, transparent);
    --scrim:color-mix(in srgb, var(--ink) 64%, transparent);
    --lamp-glow:color-mix(in srgb, var(--lamp-new) 60%, transparent);
    --shadow-1:0 1px 2px color-mix(in srgb, var(--ink) 7%, transparent), 0 16px 34px -20px color-mix(in srgb, var(--accent-deep) 38%, transparent);
    --shadow-board:0 1px 0 color-mix(in srgb, var(--accent-soft) 14%, transparent) inset, 0 48px 90px -46px color-mix(in srgb, var(--ink) 78%, transparent), 0 22px 46px -30px color-mix(in srgb, var(--accent-deep) 55%, transparent);

    /* type */
    --head:'Bricolage Grotesque', 'Bricolage Fallback', Arial, sans-serif;
    --body:'Geist', 'Geist Fallback', 'Segoe UI', Arial, sans-serif;
    --mono:'Geist Mono', 'Geist Mono Fallback', Consolas, monospace;
    --display:'Sora', 'Segoe UI', Arial, sans-serif; /* the wordmark only */

    /* shape: pills for actions, soft corners for surfaces, tighter corners for blades */
    --r-blade:5px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

    /* motion */
    --ease-out:cubic-bezier(.16, 1, .3, 1);
    --ease-in-out:cubic-bezier(.65, 0, .35, 1);
    --ease-drawer:cubic-bezier(.32, .72, 0, 1);

    color-scheme:light;
  }

  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#04070E; --bg-2:#070C18; --surface:#0B1121; --surface-2:#0F172B;
      --line:#18213B; --line-strong:#283657;
      --text:#EEF2FB; --muted:#9AA7C4; --accent-text:#8AA8FF; --good:#2FD4A0; --warn:#FFB84D;
      --selection:#24397A; --focus-ring:var(--accent-soft);
      --accent-wash:color-mix(in srgb, var(--accent) 14%, var(--surface));
      --shadow-1:0 1px 2px color-mix(in srgb, var(--ink) 50%, transparent), 0 16px 34px -20px color-mix(in srgb, var(--accent) 28%, transparent);
      --shadow-board:0 1px 0 color-mix(in srgb, var(--accent-soft) 16%, transparent) inset, 0 0 0 1px var(--board-rim), 0 48px 90px -40px color-mix(in srgb, var(--accent-deep) 42%, transparent);
      color-scheme:dark;
    }
  }
  :root[data-theme="dark"],.theme-dark{
    --bg:#04070E; --bg-2:#070C18; --surface:#0B1121; --surface-2:#0F172B;
    --line:#18213B; --line-strong:#283657;
    --text:#EEF2FB; --muted:#9AA7C4; --accent-text:#8AA8FF; --good:#2FD4A0; --warn:#FFB84D;
    --selection:#24397A; --focus-ring:var(--accent-soft);
    --accent-wash:color-mix(in srgb, var(--accent) 14%, var(--surface));
    --control-line:color-mix(in srgb, var(--muted) 62%, var(--line));
    --bad-text:color-mix(in srgb, var(--bad) 72%, var(--text));
    --shadow-1:0 1px 2px color-mix(in srgb, var(--ink) 50%, transparent), 0 16px 34px -20px color-mix(in srgb, var(--accent) 28%, transparent);
    --shadow-board:0 1px 0 color-mix(in srgb, var(--accent-soft) 16%, transparent) inset, 0 0 0 1px var(--board-rim), 0 48px 90px -40px color-mix(in srgb, var(--accent-deep) 42%, transparent);
    color-scheme:dark;
  }
  :root[data-theme="light"]{color-scheme:light}
  .theme-light{
    --bg:var(--paper); --bg-2:#E8ECF5; --surface:var(--white); --surface-2:#F6F8FC;
    --line:#DAE0EE; --line-strong:#C2CBE0;
    --text:var(--ink); --muted:#4A5470; --accent-text:#2850D6; --good:#13774C; --warn:#8A5300;
    --selection:#C9D6FF; --focus-ring:var(--accent);
    --accent-wash:color-mix(in srgb, var(--accent) 8%, var(--surface));
    --control-line:color-mix(in srgb, var(--muted) 62%, var(--line));
    --bad-text:color-mix(in srgb, var(--bad) 72%, var(--text));
    --shadow-1:0 1px 2px color-mix(in srgb, var(--ink) 7%, transparent), 0 16px 34px -20px color-mix(in srgb, var(--accent-deep) 38%, transparent);
    color-scheme:light;
  }
  .theme-light,.theme-dark{background:var(--bg);color:var(--text)}
}