/* Sequence Studio web tokens.
   Colors are the app's own values: SQUIKit AppearancePalette (dark and light surfaces, text, accent),
   DESIGN.md token table (fills, support, icon gradient, clip colors) and the approved Pip art
   (icon-work/splash/final). Sizes are a web scale built on the app's 4 pt grid and the start screen
   ladder (Typography.start 11/12/13/15/20), stretched for reading on a page.
   Page CSS uses only these variables. */

@font-face {
  font-family: "Inter SQ";
  src: url("../fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark light;

  /* Surfaces (dark, AppearancePalette.darkSurfaces) */
  --canvas: #141416;
  --divider: #080809;
  --titlebar: #232326;
  --panel: #1e1e21;
  --content: #19191c;
  --lane: #18181b;
  --timeline: #151518;
  --overlay: #2a2a2e;
  --monitor-backdrop: #2c2c2c;

  /* Text (darkText) */
  --label: #e6e6e8;
  --label2: #b2b2b8;
  --label3: #9c9ca2;

  /* Ink-based fills (white in dark) */
  --separator: rgb(255 255 255 / .065);
  --fill: rgb(255 255 255 / .11);
  --fill2: rgb(255 255 255 / .06);
  --fill-hover: rgb(255 255 255 / .16);
  --fill-pressed: rgb(255 255 255 / .22);
  --selection: rgb(255 255 255 / .14);
  --field: rgb(0 0 0 / .28);
  --field-edge: rgb(255 255 255 / .10);
  --row-hover: rgb(255 255 255 / .08);
  --scrim: rgb(0 0 0 / .35);

  /* Accent: P3 violet (DECISIONS 2026-10-13) */
  --accent: #a56bff;
  --accent-fill: #7c3aed;
  --accent-fill-hover: #8a4ff0;
  --accent-fill-pressed: #6a2bd6;
  --accent-tint: rgb(165 107 255 / .22);
  --accent-ring: rgb(165 107 255 / .55);
  --on-accent: #ffffff;

  /* Support heart and its filled button (Support entries only) */
  --support: #ea4aaa;
  --support-hover: #ef62b7;
  --support-pressed: #d23b97;
  --support-tint: rgb(234 74 170 / .16);

  /* Semantic */
  --yellow: #ffd60a;
  --marker: #ff9f0a;
  --red: #ff453a;
  --green: #30d158;

  /* Clip colors (LabelColor defaults) */
  --clip-video: #2f6fb0;
  --clip-audio: #1e8449;
  --clip-photo: #9a50c8;
  --clip-folder: #bc4f78;
  --clip-sequence: #3f7a4a;
  --clip-nested: #4f78a3;
  --clip-title: #7350c0;
  --clip-caption: #b07a1c;
  --on-clip: #ffffff;

  /* Icon gradient (export progress, finished) and the app icon field */
  --icon-gradient: linear-gradient(90deg, #350670, #8727c7, #ef3a87, #fe9e46);
  --icon-field: linear-gradient(200deg, #ffb04a 0%, #ef3a87 45%, #8727c7 75%, #541790 100%);

  /* Pip (approved art) */
  --pip-top: #ffffff;
  --pip-bottom: #c3c9d9;
  --pip-ink: #17171b;
  --pip-edge: rgb(141 147 168 / .6);
  --pip-cheek: #ff8fa3;
  --pip-tongue: #ff7389;
  --pip-shadow: rgb(0 0 0 / .38);

  /* Pip's treats (supporter page, support block) */
  --treat-cup: #f6f1ea;
  --treat-cup-edge: #d9cfc2;
  --treat-sleeve: #8727c7;
  --treat-lid: #2b2730;
  --treat-crust: #e9a246;
  --treat-crust-top: #f3b65a;
  --treat-crust-line: #b8701f;
  --treat-plate: #e9e6f0;
  --treat-sponge: #f5d49a;
  --treat-cream: #fff7ee;
  --treat-icing: #ffd1e3;
  --treat-berry: #ef3a87;
  --treat-stem: #3f7a4a;
  --treat-box: #8727c7;
  --treat-box-top: #a14be0;
  --treat-ribbon: #ffb04a;
  --treat-ribbon-knot: #fe9e46;
  --treat-steam: rgb(255 255 255 / .55);

  /* Home hero: the startup splash (Theme.Splash). Fixed dark in both appearances, the icon field
     (App/Resources/SplashField.png) on the right, fading into the splash background toward the text. */
  --tier-h: 152px;
  --splash-top: #1d1d21;
  --splash-bottom: #151518;
  --hero-base: linear-gradient(var(--splash-top), var(--splash-bottom));
  --hero-art: url("../img/field.webp");
  --hero-fade-x: linear-gradient(90deg, transparent 0%, transparent 30%, #000 80%);
  --hero-fade-y: linear-gradient(0deg, var(--splash-bottom) 0%, rgb(21 21 24 / 0) 42%);
  --hero-fade-m: linear-gradient(180deg, transparent 0%, #000 60%);
  --on-field: #ffffff;
  --on-field2: rgb(255 255 255 / .82);
  --field-chip: rgb(255 255 255 / .16);
  --on-field-edge: rgb(255 255 255 / .28);
  --field-card: rgb(24 14 40 / .42);
  --shadow-float: 0 24px 60px rgb(40 0 70 / .35);
  --field-btn: #ffffff;
  --field-btn-hover: #f3ecff;
  --field-btn-pressed: #e4d6fb;
  --field-btn-ink: #3b0f6b;
  --field-focus: 0 0 0 2px #541790, 0 0 0 4px #ffffff;
  --field-ink-shadow: 0 1px 24px rgb(60 10 90 / .25);
  --support-field: linear-gradient(135deg, rgb(255 176 74 / .16), rgb(239 58 135 / .14) 45%, rgb(135 39 199 / .16));
  --stage-floor: radial-gradient(50% 50% at 50% 50%, rgb(0 0 0 / .22), rgb(0 0 0 / 0) 70%);

  /* Page roles */
  --bg: var(--lane);
  --bg-hero-top: #1c1c20;
  --bg-hero-bottom: #161619;
  --card: var(--panel);
  --card-raised: var(--titlebar);
  --foot-bg: var(--canvas);
  --card-edge: var(--separator);
  --header-bg: rgb(24 24 27 / .86);
  --shadow-card: 0 6px 20px rgb(0 0 0 / .28);
  --shadow-shot: 0 30px 80px rgb(0 0 0 / .55), 0 0 0 1px rgb(255 255 255 / .06);

  /* Type */
  --font: "Inter SQ", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-caption: 12px;
  --fs-small: 13px;
  --fs-body: 15px;
  --fs-lead: 17px;
  --fs-title: 20px;
  --fs-h3: 24px;
  --fs-h2: clamp(30px, 4.4vw, 48px);
  --fs-h1: clamp(40px, 6.6vw, 76px);
  --lh-tight: 1.05;
  --lh-head: 1.15;
  --lh-body: 1.55;
  --track-display: -.03em;
  --track-head: -.02em;
  --w-regular: 420;
  --w-medium: 540;
  --w-semibold: 640;

  /* Spacing (4 pt grid) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --s10: 128px;
  --icon-to-label: 6px;

  /* Sizes */
  --page-max: 1200px;
  --text-max: 640px;
  --header-h: 60px;
  --control-h: 40px;
  --control-h-lg: 52px;
  --hit-min: 44px;

  /* Radii (small 3, control 5 in the app; the web page uses the start screen and modal set) */
  --r-small: 3px;
  --r-chip: 6px;
  --r-button: 10px;
  --r-well: 8px;
  --r-card: 14px;
  --r-stage: 24px;
  --r-pill: 999px;

  /* Focus: the app's accent focus line, as a ring */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* Motion */
  --t-fast: 120ms;
  --t-mid: 200ms;
  --t-slow: 300ms;
  --t-reveal: 600ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --disabled-alpha: .4;

  /* The app window rebuild on the home page. Always the app's dark appearance (AppearancePalette.darkSurfaces,
     darkText, DESIGN.md fills and clip colors), so these do not switch with the page's light mode. */
  --am-gap: #0b0b0d;
  --am-bar: #232326;
  --am-panel: #1e1e21;
  --am-content: #19191c;
  --am-lane: #18181b;
  --am-timeline: #151518;
  --am-overlay: #2a2a2e;
  --am-pic: #000000;
  --am-label: #e6e6e8;
  --am-label2: #b2b2b8;
  --am-label3: #9c9ca2;
  --am-sep: rgb(255 255 255 / .065);
  --am-line: rgb(255 255 255 / .1);
  --am-fill: rgb(255 255 255 / .11);
  --am-fill2: rgb(255 255 255 / .06);
  --am-fill-hover: rgb(255 255 255 / .16);
  --am-fill-pressed: rgb(255 255 255 / .22);
  --am-field: rgb(0 0 0 / .28);
  --am-accent: #a56bff;
  --am-accent-fill: #7c3aed;
  --am-accent-hover: #8a4ff0;
  --am-accent-pressed: #6a2bd6;
  --am-accent-tint: rgb(165 107 255 / .2);
  --am-on-accent: #ffffff;
  --am-yellow: #ffd60a;
  --am-green: #30d158;
  --am-meter: linear-gradient(0deg, #30d158 0%, #30d158 62%, #ffd60a 82%, #ff453a 100%);
  --am-graphic: #4a4a50;
  --am-scope: #6ee7a8;
  --am-temp: linear-gradient(90deg, #3b82f6, #e5e7eb 50%, #f59e0b);
  --am-tint: linear-gradient(90deg, #22c55e, #e5e7eb 50%, #d946ef);
  --am-sat: linear-gradient(90deg, #8b8b92, #a56bff);
  --am-track: rgb(255 255 255 / .16);
  --am-warm: #ff9a3c;
  --am-cool: #3c8cff;
  --am-green-tint: #3cff7a;
  --am-magenta: #ff3cd2;
  --am-playhead: rgb(255 255 255 / .92);
  --am-playhead-head: linear-gradient(180deg, #ffffff, #c3c9d9);
  --am-clip-video: #2f6fb0;
  --am-clip-audio: #1e8449;
  --am-clip-title: #7350c0;
  --am-marker: #30d158;
  --am-shadow: 0 30px 90px rgb(20 0 50 / .45), 0 0 0 1px rgb(255 255 255 / .08);
  --am-fs: 13px;
  --am-fs-s: 12px;
  --am-fs-xs: 11px;
  --am-r: 5px;
  --am-r-s: 3px;
}

@media (prefers-color-scheme: light) {
  :root {
    /* Surfaces (AppearancePalette.lightSurfaces) */
    --canvas: #dcdcdf;
    --divider: #d0d0d4;
    --titlebar: #eeeef0;
    --panel: #ffffff;
    --content: #f7f7f8;
    --lane: #f4f4f5;
    --timeline: #f1f1f3;
    --overlay: #ebebed;

    --label: #19191c;
    --label2: #4c4c52;
    --label3: #5e5e64;

    --separator: rgb(0 0 0 / .08);
    --fill: rgb(0 0 0 / .07);
    --fill2: rgb(0 0 0 / .04);
    --fill-hover: rgb(0 0 0 / .10);
    --fill-pressed: rgb(0 0 0 / .15);
    --selection: rgb(0 0 0 / .08);
    --field: rgb(0 0 0 / .05);
    --field-edge: rgb(0 0 0 / .12);
    --row-hover: rgb(0 0 0 / .05);

    --accent: #7a33e0;
    --accent-tint: rgb(122 51 224 / .14);
    --accent-ring: rgb(122 51 224 / .45);

    --support: #d6338f;
    --support-hover: #e04a9e;
    --support-pressed: #bb2a7c;
    --support-tint: rgb(214 51 143 / .12);

    --marker: #a35c00;
    --red: #c4281e;
    --green: #1f8a3c;

    --bg: var(--content);
    --bg-hero-top: #ffffff;
    --bg-hero-bottom: #f4f4f5;
    --card: var(--panel);
    --card-raised: var(--panel);
    --foot-bg: var(--titlebar);
    --card-edge: rgb(0 0 0 / .08);
    --header-bg: rgb(247 247 248 / .88);
    --shadow-card: 0 6px 20px rgb(0 0 0 / .06), 0 0 0 1px rgb(0 0 0 / .06);
    --shadow-shot: 0 30px 70px rgb(30 20 60 / .22), 0 0 0 1px rgb(0 0 0 / .08);
    --pip-shadow: rgb(40 20 70 / .22);
    --treat-steam: rgb(80 70 100 / .35);
    --stage-floor: radial-gradient(50% 50% at 50% 50%, rgb(60 20 90 / .14), rgb(60 20 90 / 0) 70%);
    --support-field: linear-gradient(135deg, rgb(255 176 74 / .18), rgb(239 58 135 / .12) 45%, rgb(135 39 199 / .14));
  }
}