/* =========================================================================
   Slide Studio — chrome tokens
   Owner: Builder C (app chrome).  Namespace: --c-* / --sp-* / --fs-* / --r-*
   / --el-* / --t-* / layout.  NOTHING here is used on a slide surface; slide
   tokens live in slide-tokens.css under --sl-*.  Spec: 07-design-spec §G.

   Dark is the default because the site is dark (index1.css #0D0C1D).
   Every value below is from the spec's computed-contrast tables; do not
   "tidy" a hex without re-running the contrast maths in §G.1.
   ========================================================================= */

:root {
  color-scheme: dark;

  /* ---- colour: dark (default) ---------------------------------------- */
  --c-bg-0:        #0D0C1D;   /* page — matches index1.css */
  --c-bg-1:        #14132B;   /* panel */
  --c-bg-2:        #1C1B38;   /* raised card, input */
  --c-bg-3:        #262445;   /* hover / selected */

  --c-text-1:      #FFFFFF;   /* 19.31 : 1 on bg-0 */
  --c-text-2:      #C6C4DA;   /* 11.32 : 1 */
  --c-text-3:      #9C9AB8;   /*  7.11 : 1 — never rendered below 13px */

  --c-border:      #7A78A3;   /* structural edges — 4.64 : 1 */
  --c-border-sub:  #2F2D4D;   /* decorative dividers ONLY */

  --c-primary:     #4F46E5;
  --c-primary-hov: #6257F0;
  --c-on-primary:  #FFFFFF;   /* 6.29 : 1 on --c-primary */
  --c-primary-txt: #ACA4FF;   /* primary AS TEXT on a dark surface */

  --c-success:     #34D399;
  --c-warning:     #FBBF24;
  --c-danger:      #F87171;
  --c-focus:       #B7B0FF;

  /* Tinted fills. Kept as tokens so light mode can re-cut them. */
  --c-primary-fill: rgba(79, 70, 229, .20);
  --c-success-fill: rgba(52, 211, 153, .14);
  --c-warning-fill: rgba(251, 191, 36, .14);
  --c-danger-fill:  rgba(248, 113, 113, .14);
  --c-scrim:        rgba(8, 8, 18, .72);
  --c-scrim-soft:   rgba(8, 8, 18, .40);

  /* ---- spacing: 4px base, 8px rhythm ---------------------------------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;

  /* ---- type ----------------------------------------------------------- */
  --fs-xs:  11px;  --lh-xs:  16px;
  --fs-sm:  13px;  --lh-sm:  20px;
  --fs-md:  15px;  --lh-md:  22px;
  --fs-lg:  18px;  --lh-lg:  26px;
  --fs-xl:  22px;  --lh-xl:  30px;
  --fs-2xl: 28px;  --lh-2xl: 36px;
  --fs-3xl: 36px;  --lh-3xl: 44px;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  --c-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --c-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* ---- radius ---------------------------------------------------------- */
  --r-xs: 4px;  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-xl: 24px;
  --r-pill: 999px;

  /* ---- elevation ------------------------------------------------------- */
  --el-0: none;
  --el-1: 0 1px 2px rgba(0,0,0,.30);
  --el-2: 0 4px 12px rgba(0,0,0,.34);
  --el-3: 0 12px 32px rgba(0,0,0,.42);
  --el-4: 0 24px 64px rgba(0,0,0,.52);

  /* ---- motion ---------------------------------------------------------- */
  --t-micro:   120ms;
  --t-state:   180ms;
  --t-surface: 240ms;
  --t-view:    320ms;
  --ease-enter: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit:  cubic-bezier(0.4, 0, 1, 1);

  /* ---- layout ---------------------------------------------------------- */
  --nav-h: 64px;
  --toolbar-h: 56px;
  --rail-w: 260px;
  --rail-w-sm: 220px;
  --rail-w-icon: 72px;
  --inspector-w: 340px;
  --inspector-w-sm: 320px;
  --canvas-min: 960px;   /* the load-bearing rule — see §I */

  /* Live layout values the editor grid reads. The media queries in
     chrome.css re-point these; nothing else may. */
  --rail-now: var(--rail-w);
  --inspector-now: var(--inspector-w);
  --gutter: 32px;
}

/* ---- light mode ------------------------------------------------------- */
@media (prefers-color-scheme: light) {
  :root:not([data-ui-theme="dark"]) {
    color-scheme: light;
    --c-bg-0: #FFFFFF;  --c-bg-1: #F6F7FB;  --c-bg-2: #EDEFF6;  --c-bg-3: #E2E5F0;
    --c-text-1: #12131F; --c-text-2: #474A60; --c-text-3: #5F6379;
    --c-border: #767B97; --c-border-sub: #E2E5F0;
    --c-primary: #4F46E5; --c-primary-hov: #4038C7;
    --c-on-primary: #FFFFFF; --c-primary-txt: #4038C7;
    --c-success: #036049; --c-warning: #854D0E; --c-danger: #B91C1C;
    --c-focus: #3730A3;
    --c-primary-fill: rgba(79, 70, 229, .12);
    --c-success-fill: rgba(3, 96, 73, .12);
    --c-warning-fill: rgba(133, 77, 14, .12);
    --c-danger-fill:  rgba(185, 28, 28, .10);
    --c-scrim:        rgba(18, 19, 31, .48);
    --c-scrim-soft:   rgba(18, 19, 31, .24);
    --el-1: 0 1px 2px rgba(16,20,40,.08);
    --el-2: 0 4px 12px rgba(16,20,40,.10);
    --el-3: 0 12px 32px rgba(16,20,40,.14);
    --el-4: 0 24px 64px rgba(16,20,40,.18);
  }
}

:root[data-ui-theme="light"] {
  color-scheme: light;
  --c-bg-0: #FFFFFF;  --c-bg-1: #F6F7FB;  --c-bg-2: #EDEFF6;  --c-bg-3: #E2E5F0;
  --c-text-1: #12131F; --c-text-2: #474A60; --c-text-3: #5F6379;
  --c-border: #767B97; --c-border-sub: #E2E5F0;
  --c-primary: #4F46E5; --c-primary-hov: #4038C7;
  --c-on-primary: #FFFFFF; --c-primary-txt: #4038C7;
  --c-success: #036049; --c-warning: #854D0E; --c-danger: #B91C1C;
  --c-focus: #3730A3;
  --c-primary-fill: rgba(79, 70, 229, .12);
  --c-success-fill: rgba(3, 96, 73, .12);
  --c-warning-fill: rgba(133, 77, 14, .12);
  --c-danger-fill:  rgba(185, 28, 28, .10);
  --c-scrim:        rgba(18, 19, 31, .48);
  --c-scrim-soft:   rgba(18, 19, 31, .24);
  --el-1: 0 1px 2px rgba(16,20,40,.08);
  --el-2: 0 4px 12px rgba(16,20,40,.10);
  --el-3: 0 12px 32px rgba(16,20,40,.14);
  --el-4: 0 24px 64px rgba(16,20,40,.18);
}