/*
 * GENERATED by scripts/sync-tokens.mjs. Do not edit by hand.
 * Source: Yatishara Studio (yatishara-studio)
 *   src/styles/tokens.css, src/mos-app/theme.js (theme "gold" = Archive),
 *   src/components/studio-boot-frame.css (--studio-theme-gradient)
 *
 * Appearance: html[data-appearance="light" | "dark"], set before paint by the
 * inline script in src/app/layout.tsx. Without JS the device setting decides.
 */

/* ---- Studio tokens.css (verbatim) ---- */
/*
 * Studio foundation tokens.
 * Colour stays in theme.js (one neutral light base, one neutral dark base,
 * accent from the named theme). Everything else lives here.
 * Existing --studio-fs-* / --studio-r-* names alias the new scale so current
 * chrome keeps resolving while panes migrate.
 */

:root {
  --studio-type-meta: 12px;
  --studio-type-body: 13px;
  --studio-type-title: 14px;
  --studio-type-pane: 16px;
  --studio-type-page: 20px;
  --studio-type-hero: 24px;

  --studio-leading-meta: 16px;
  --studio-leading-body: 20px;
  --studio-leading-title: 20px;
  --studio-leading-pane: 24px;
  --studio-leading-page: 28px;

  --studio-w-regular: 400;
  --studio-w-medium: 500;
  --studio-w-semibold: 600;

  --studio-space-1: 4px;
  --studio-space-2: 8px;
  --studio-space-3: 12px;
  --studio-space-4: 16px;
  --studio-space-5: 24px;
  --studio-space-6: 32px;
  --studio-space-7: 48px;
  --studio-space-pane-x: 16px;
  --studio-space-rail-x: 8px;
  --studio-space-stack: 12px;

  --studio-radius-chip: 4px;
  --studio-radius-control: 10px;
  --studio-radius-panel: 8px;
  --studio-radius-overlay: 12px;
  --studio-radius-round: 999px;

  /* One head height. Section bars use the same 36px. */
  --studio-h-icon: 28px;
  --studio-h-close: 28px;
  --studio-h-control: 32px;
  --studio-h-head: 36px;
  --studio-h-row: 36px;
  --cursor-head-h: 36px;
  --cursor-section-h: 36px;
  --studio-h-composer: 44px;
  /* Composer frame ring (Dallas 2026-10-11): half of the --mos-border hairline
     at rest, a faint accent hint on focus. Colours resolve from theme.js. */
  --studio-composer-ring: color-mix(in srgb, var(--mos-border, var(--color-cursor-border-soft)) 50%, transparent);
  --studio-composer-ring-focus: color-mix(
    in srgb,
    var(--cursor-accent-ink, var(--cursor-accent, var(--mos-accent))) 5%,
    var(--studio-composer-ring)
  );
  /* Composer glass (Dallas 2026-10-11): the frame fill is the theme plate (or
     page in the dark DM composer) at 90% (light and dark), so what sits behind
     it shows through, plus a 3px backdrop blur. */
  --studio-composer-bg-alpha: 90%;
  --studio-composer-bg: color-mix(in srgb, var(--mos-plate) var(--studio-composer-bg-alpha), transparent);
  --studio-composer-bg-page: color-mix(
    in srgb,
    var(--mos-page, var(--color-cursor-panel)) var(--studio-composer-bg-alpha),
    transparent
  );
  --studio-composer-blur: blur(3px);
  /* Small floating buttons (Dallas 2026-10-11): mobile bottom-nav circles and the
     chat jump-to-latest button share one crisp, low shadow. Light below. */
  --studio-float-btn-shadow: 0 1px 3px rgb(0 0 0 / 0.24);
  /* Inactive desktop header tab fill; the mobile bottom nav bar reuses it. */
  --studio-head-tab-fill: rgb(0 0 0 / 0.22);
  /* App card surface for skeletons / boot frame (Dallas 2026-10-11): the same
     paint the loaded card gets from .studio-backdrop (studio-shell-paint.css),
     so there is no flat white or flat page flash before the app mounts.
     Dark: vertical vignette + accent glows over the page. Light below. */
  --studio-card-surface:
    linear-gradient(
      to bottom,
      color-mix(in srgb, #000 22%, transparent) 0%,
      color-mix(in srgb, #000 2%, transparent) 22%,
      transparent 40%,
      transparent 62%,
      color-mix(in srgb, #000 10%, transparent) 82%,
      color-mix(in srgb, #000 38%, transparent) 100%
    ),
    linear-gradient(to bottom, color-mix(in srgb, var(--cursor-accent) 6%, transparent) 0%, transparent 45%),
    linear-gradient(
      to top,
      color-mix(in srgb, var(--cursor-accent-hover, var(--cursor-accent)) 3%, transparent) 0%,
      transparent 35%
    ),
    var(--mos-page, var(--mos-bg, #111111));
  /* App card edge (Dallas 2026-10-11): no border at all. The card rules use
     border: 0; the token stays transparent for anything still reading it. */
  --studio-frame-border: transparent;

  --studio-z-base: 0;
  --studio-z-sticky: 10;
  --studio-z-rail: 20;
  --studio-z-drawer: 30;
  --studio-z-dropdown: 40;
  --studio-z-overlay: 50;
  --studio-z-sheet: 60;
  --studio-z-dialog: 70;
  --studio-z-toast: 80;
  --studio-z-tooltip: 90;

  /* Context-menu veil and the chrome that must stay sharp above it.
     The veil is a pseudo-element of the app card; the workspace header is an
     absolutely-positioned sibling inside that same card, so these two are a
     matched pair. Header = veil + 1 by contract — never tune one alone. */
  --studio-z-menu-veil: 900;
  --studio-z-above-menu-veil: 901;
  /* Floating context / app menus — above in-card veil and sharp chrome (body or polish). */
  --studio-z-menu-panel: calc(var(--studio-z-above-menu-veil, 901) + 1);
  /* Context menus: desktop card veil + mobile edge-sheet scrim share one look. */
  --studio-menu-veil-blur: blur(2px);
  /* No tint (Dallas 2026-10-07): the veil is blur only, light and dark. */
  --studio-menu-veil-dim: transparent;

  --studio-dur-fast: 120ms;
  --studio-dur-overlay: 180ms;
  --studio-ease: cubic-bezier(0.22, 1, 0.36, 1);

  --studio-fs-2xs: var(--studio-type-meta);
  --studio-fs-xs: var(--studio-type-meta);
  --studio-fs-sm: var(--studio-type-meta);
  --studio-fs-md: var(--studio-type-title);
  --studio-fs-lg: var(--studio-type-pane);
  --studio-fs-xl: var(--studio-type-pane);
  --studio-fs-2xl: var(--studio-type-page);
  --studio-fs-3xl: var(--studio-type-hero);

  --studio-w-strong: var(--studio-w-semibold);
  --studio-w-bold: var(--studio-w-semibold);

  --studio-r-xs: var(--studio-radius-chip);
  --studio-r-sm: var(--studio-radius-control);
  --studio-r-md: var(--studio-radius-panel);
  --studio-r-lg: var(--studio-radius-panel);
  --studio-r-xl: var(--studio-radius-overlay);
  --studio-r-2xl: var(--studio-radius-overlay);
  --studio-r-3xl: var(--studio-radius-overlay);
  --studio-r-4xl: var(--studio-radius-overlay);
  --studio-r-pill: var(--studio-radius-round);

  --studio-control-h: var(--studio-h-control);
  --studio-search-h: var(--studio-h-control);
  --studio-chip-h: 26px;
  --studio-chip-pad-x: var(--studio-space-2);
  --studio-chip-fs: var(--studio-type-meta);
  --studio-chip-icon: 12px;
  --studio-chip-count-h: 16px;
  --studio-chip-count-fs: var(--studio-type-meta);
  --studio-pane-title-size: var(--studio-type-pane);
  --studio-section-title-size: var(--studio-type-title);
  --studio-thread-title-size: var(--studio-type-title);
  --studio-label-size: var(--studio-type-title);
  --studio-label-weight: var(--studio-w-medium);
  --studio-input-radius: var(--studio-radius-control);
  --studio-chrome-radius: var(--studio-radius-panel);
  --studio-save-radius: var(--studio-radius-control);
  --studio-save-weight: var(--studio-w-medium);
}

:root[data-appearance="light"] {
  --studio-float-btn-shadow: 0 1px 3px rgb(15 23 42 / 0.1);
  --studio-head-tab-fill: rgb(0 0 0 / 0.04);
  /* Light: white -> 9% accent -> white, as the loaded card. */
  --studio-card-surface: linear-gradient(
    to bottom,
    #fff 0%,
    color-mix(in srgb, var(--cursor-accent) 9%, #fff) 50%,
    #fff 100%
  );
}

/* ---- Colour: neutral base + Archive accent ---- */
:root,
:root[data-appearance="light"] {
  color-scheme: light;
  --mos-page: #fcfcfc;
  --mos-plate: #f9f9f9;
  --mos-plate-strong: #efefef;
  --mos-hover: #e8e8e8;
  --mos-active: #d8d8d8;
  --mos-text: #202020;
  --mos-text-soft: #383838;
  --mos-muted: #646464;
  --mos-faint: #8a8a8a;
  --mos-border: rgba(0,0,0,0.12);
  --mos-border-soft: rgba(0,0,0,0.08);
  --mos-accent: #996408;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #996408;
  --mos-secondary: #fce9c2;
  --cursor-accent: #996408;
  --cursor-accent-ink: #996408;
  --color-cursor-border-soft: rgba(0,0,0,0.08);
  --studio-theme-grad-base: var(--mos-page);
  --studio-theme-grad-p0: 20%;
  --studio-theme-grad-p1: 10%;
  --studio-theme-grad-p2: 14%;
}

:root[data-appearance="dark"] {
  color-scheme: dark;
  --mos-page: #111111;
  --mos-plate: #161616;
  --mos-plate-strong: #222222;
  --mos-hover: #242424;
  --mos-active: #2e2e2e;
  --mos-text: #eeeeee;
  --mos-text-soft: rgba(238,238,238,0.92);
  --mos-muted: rgba(238,238,238,0.62);
  --mos-faint: rgba(238,238,238,0.45);
  --mos-border: rgba(255, 255, 255, 0.1);
  --mos-border-soft: rgba(255, 255, 255, 0.06);
  --mos-accent: #a26a09;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #b87c14;
  --mos-secondary: #3d3422;
  --cursor-accent: #a26a09;
  --cursor-accent-ink: #b87c14;
  --color-cursor-border-soft: rgba(255, 255, 255, 0.06);
  --studio-theme-grad-base: var(--mos-page);
  --studio-theme-grad-p0: 28%;
  --studio-theme-grad-p1: 8%;
  --studio-theme-grad-p2: 16%;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-appearance]) {
    color-scheme: dark;
    --mos-page: #111111;
    --mos-plate: #161616;
    --mos-plate-strong: #222222;
    --mos-hover: #242424;
    --mos-active: #2e2e2e;
    --mos-text: #eeeeee;
    --mos-text-soft: rgba(238,238,238,0.92);
    --mos-muted: rgba(238,238,238,0.62);
    --mos-faint: rgba(238,238,238,0.45);
    --mos-border: rgba(255, 255, 255, 0.1);
    --mos-border-soft: rgba(255, 255, 255, 0.06);
    --mos-accent: #a26a09;
    --mos-accent-fg: #ffffff;
    --mos-accent-ink: #b87c14;
    --mos-secondary: #3d3422;
    --cursor-accent: #a26a09;
    --cursor-accent-ink: #b87c14;
    --color-cursor-border-soft: rgba(255, 255, 255, 0.06);
    --studio-theme-grad-base: var(--mos-page);
    --studio-theme-grad-p0: 28%;
    --studio-theme-grad-p1: 8%;
    --studio-theme-grad-p2: 16%;
  }
}

/* ---- Every Studio accent: html[data-accent="<id>"] (default gold) ---- */
:root[data-accent="rose"] {
  --mos-accent: #c90d2c;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #c90d2c;
  --mos-secondary: #f7d1d8;
  --cursor-accent: #c90d2c;
  --cursor-accent-ink: #c90d2c;
}
:root[data-accent="rose"][data-appearance="dark"] {
  --mos-accent: #eb0f34;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #eb4e69;
  --mos-secondary: #402830;
  --cursor-accent: #eb0f34;
  --cursor-accent-ink: #eb4e69;
}
:root[data-accent="cherry"] {
  --mos-accent: #be0e55;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #be0e55;
  --mos-secondary: #f2d1de;
  --cursor-accent: #be0e55;
  --cursor-accent-ink: #be0e55;
}
:root[data-accent="cherry"][data-appearance="dark"] {
  --mos-accent: #e61167;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #eb4789;
  --mos-secondary: #452934;
  --cursor-accent: #e61167;
  --cursor-accent-ink: #eb4789;
}
:root[data-accent="rosewood"] {
  --mos-accent: #931039;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #931039;
  --mos-secondary: #eadde1;
  --cursor-accent: #931039;
  --cursor-accent-ink: #931039;
}
:root[data-accent="rosewood"][data-appearance="dark"] {
  --mos-accent: #b81447;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #eb4a7c;
  --mos-secondary: #423538;
  --cursor-accent: #b81447;
  --cursor-accent-ink: #eb4a7c;
}
:root[data-accent="coral"] {
  --mos-accent: #be2b0e;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #be2b0e;
  --mos-secondary: #f2dcd8;
  --cursor-accent: #be2b0e;
  --cursor-accent-ink: #be2b0e;
}
:root[data-accent="coral"][data-appearance="dark"] {
  --mos-accent: #df3311;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #e95538;
  --mos-secondary: #48302b;
  --cursor-accent: #df3311;
  --cursor-accent-ink: #e95538;
}
:root[data-accent="ember"] {
  --mos-accent: #b6510a;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #b6510a;
  --mos-secondary: #fde4cc;
  --cursor-accent: #b6510a;
  --cursor-accent-ink: #b6510a;
}
:root[data-accent="ember"][data-appearance="dark"] {
  --mos-accent: #c2570a;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #d86818;
  --mos-secondary: #3d2e22;
  --cursor-accent: #c2570a;
  --cursor-accent-ink: #d86818;
}
:root[data-accent="copper"] {
  --mos-accent: #87350d;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #87350d;
  --mos-secondary: #eadcd5;
  --cursor-accent: #87350d;
  --cursor-accent-ink: #87350d;
}
:root[data-accent="copper"][data-appearance="dark"] {
  --mos-accent: #ac4311;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #e65b1a;
  --mos-secondary: #3f352e;
  --cursor-accent: #ac4311;
  --cursor-accent-ink: #e65b1a;
}
:root[data-accent="gold"] {
  --mos-accent: #996408;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #996408;
  --mos-secondary: #fce9c2;
  --cursor-accent: #996408;
  --cursor-accent-ink: #996408;
}
:root[data-accent="gold"][data-appearance="dark"] {
  --mos-accent: #a26a09;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #b87c14;
  --mos-secondary: #3d3422;
  --cursor-accent: #a26a09;
  --cursor-accent-ink: #b87c14;
}
:root[data-accent="sand"] {
  --mos-accent: #774a0d;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #774a0d;
  --mos-secondary: #e7e0d7;
  --cursor-accent: #774a0d;
  --cursor-accent-ink: #774a0d;
}
:root[data-accent="sand"][data-appearance="dark"] {
  --mos-accent: #9c6011;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #c07715;
  --mos-secondary: #403a30;
  --cursor-accent: #9c6011;
  --cursor-accent-ink: #c07715;
}
:root[data-accent="lime"] {
  --mos-accent: #4c7a08;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #4c7a08;
  --mos-secondary: #e6f5c8;
  --cursor-accent: #4c7a08;
  --cursor-accent-ink: #4c7a08;
}
:root[data-accent="lime"][data-appearance="dark"] {
  --mos-accent: #528408;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #609511;
  --mos-secondary: #343d28;
  --cursor-accent: #528408;
  --cursor-accent-ink: #609511;
}
:root[data-accent="moss"] {
  --mos-accent: #50600b;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #50600b;
  --mos-secondary: #dee1d2;
  --cursor-accent: #50600b;
  --cursor-accent-ink: #50600b;
}
:root[data-accent="moss"][data-appearance="dark"] {
  --mos-accent: #687e0e;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #799310;
  --mos-secondary: #393c2a;
  --cursor-accent: #687e0e;
  --cursor-accent-ink: #799310;
}
:root[data-accent="agent"] {
  --mos-accent: #0a8035;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #0a8035;
  --mos-secondary: #c8ebd4;
  --cursor-accent: #0a8035;
  --cursor-accent-ink: #0a8035;
}
:root[data-accent="agent"][data-appearance="dark"] {
  --mos-accent: #0a8737;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #119c43;
  --mos-secondary: #283d2e;
  --cursor-accent: #0a8737;
  --cursor-accent-ink: #119c43;
}
:root[data-accent="teal"] {
  --mos-accent: #087a75;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #087a75;
  --mos-secondary: #cfe5e4;
  --cursor-accent: #087a75;
  --cursor-accent-ink: #087a75;
}
:root[data-accent="teal"][data-appearance="dark"] {
  --mos-accent: #08847e;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #119791;
  --mos-secondary: #1e3f3b;
  --cursor-accent: #08847e;
  --cursor-accent-ink: #119791;
}
:root[data-accent="ocean"] {
  --mos-accent: #0b76a8;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #0b76a8;
  --mos-secondary: #c5e6f5;
  --cursor-accent: #0b76a8;
  --cursor-accent-ink: #0b76a8;
}
:root[data-accent="ocean"][data-appearance="dark"] {
  --mos-accent: #0b7db1;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #1690c7;
  --mos-secondary: #243740;
  --cursor-accent: #0b7db1;
  --cursor-accent-ink: #1690c7;
}
:root[data-accent="steel"] {
  --mos-accent: #0d5577;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #0d5577;
  --mos-secondary: #d5e1e7;
  --cursor-accent: #0d5577;
  --cursor-accent-ink: #0d5577;
}
:root[data-accent="steel"][data-appearance="dark"] {
  --mos-accent: #116f9c;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #1690ca;
  --mos-secondary: #303b40;
  --cursor-accent: #116f9c;
  --cursor-accent-ink: #1690ca;
}
:root[data-accent="cobalt"] {
  --mos-accent: #1050da;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #1050da;
  --mos-secondary: #d1dff7;
  --cursor-accent: #1050da;
  --cursor-accent-ink: #1050da;
}
:root[data-accent="cobalt"][data-appearance="dark"] {
  --mos-accent: #316def;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #5383ec;
  --mos-secondary: #283240;
  --cursor-accent: #316def;
  --cursor-accent-ink: #5383ec;
}
:root[data-accent="indigo"] {
  --mos-accent: #113097;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #113097;
  --mos-secondary: #d5d8e4;
  --cursor-accent: #113097;
  --cursor-accent-ink: #113097;
}
:root[data-accent="indigo"][data-appearance="dark"] {
  --mos-accent: #1741cf;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #6181ed;
  --mos-secondary: #353845;
  --cursor-accent: #1741cf;
  --cursor-accent-ink: #6181ed;
}
:root[data-accent="violet"] {
  --mos-accent: #6316df;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #6316df;
  --mos-secondary: #e0d1f7;
  --cursor-accent: #6316df;
  --cursor-accent-ink: #6316df;
}
:root[data-accent="violet"][data-appearance="dark"] {
  --mos-accent: #8c4fee;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #9d6bef;
  --mos-secondary: #322840;
  --cursor-accent: #8c4fee;
  --cursor-accent-ink: #9d6bef;
}
:root[data-accent="plum"] {
  --mos-accent: #8a0f7d;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #8a0f7d;
  --mos-secondary: #e5d5e3;
  --cursor-accent: #8a0f7d;
  --cursor-accent-ink: #8a0f7d;
}
:root[data-accent="plum"][data-appearance="dark"] {
  --mos-accent: #ae139f;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #e830d6;
  --mos-secondary: #3d313c;
  --cursor-accent: #ae139f;
  --cursor-accent-ink: #e830d6;
}
:root[data-accent="fuchsia"] {
  --mos-accent: #c70fac;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #c70fac;
  --mos-secondary: #f0d1ec;
  --cursor-accent: #c70fac;
  --cursor-accent-ink: #c70fac;
}
:root[data-accent="fuchsia"][data-appearance="dark"] {
  --mos-accent: #d510b9;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #e935cf;
  --mos-secondary: #442a42;
  --cursor-accent: #d510b9;
  --cursor-accent-ink: #e935cf;
}
:root[data-accent="slate"] {
  --mos-accent: #515e70;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #515e70;
  --mos-secondary: #dbdde0;
  --cursor-accent: #515e70;
  --cursor-accent-ink: #515e70;
}
:root[data-accent="slate"][data-appearance="dark"] {
  --mos-accent: #67778e;
  --mos-accent-fg: #ffffff;
  --mos-accent-ink: #79889e;
  --mos-secondary: #35373a;
  --cursor-accent: #67778e;
  --cursor-accent-ink: #79889e;
}

/* ---- Theme gradient (Studio sign-in wash; static here, no hue sway) ---- */
:root {
  --studio-theme-grad-accent: var(--cursor-accent);
  --studio-theme-grad-a: var(--studio-theme-grad-accent);
  --studio-theme-grad-b: var(--studio-theme-grad-accent);
  --studio-theme-gradient: linear-gradient(
      152deg,
      color-mix(in srgb, var(--studio-theme-grad-a) var(--studio-theme-grad-p0), var(--studio-theme-grad-base)) 0%,
      color-mix(in srgb, var(--studio-theme-grad-a) var(--studio-theme-grad-p1), var(--studio-theme-grad-base)) 48%,
      color-mix(in srgb, var(--studio-theme-grad-b) var(--studio-theme-grad-p2), var(--studio-theme-grad-base)) 100%
    );
}