/* ==========================================================================
   SB Layout — design tokens. THE palette, shared by every page (styles.css
   imports this file; admin.html and the landing link it directly).

   Two themes, one idea: paper and ink. Light is a warm off-white sheet with
   black type; dark is the same page at night. The accent IS the ink: black on
   paper, white on ink — anything drawn on an accent background must use
   --on-accent for its text, never a literal white. Success / warning / error
   stay coloured, they carry meaning. The --page-* tokens are the storyboard
   sheet itself and never change with the theme.
   ========================================================================== */

:root {
  color-scheme: dark;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Bricolage Grotesque', 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;

  /* Ink */
  --bg-0: #141414;
  --bg-1: #1A1A1A;
  --bg-2: #1F1F1F;
  --bg-3: #2A2A2A;
  --bg-4: #333333;

  --text-0: #FAFAFA;
  --text-1: #E4E4E7;
  --text-2: #A1A1AA;
  --text-3: #7A7873;
  --text-4: #52525B;

  --border-0: #2A2A2A;
  --border-1: #3A3A3A;
  --border-2: #52525B;

  --accent: #FAFAFA;
  --accent-hover: #FFFFFF;
  --accent-muted: rgba(250, 250, 250, 0.22);
  --accent-subtle: rgba(250, 250, 250, 0.08);
  --accent-text: #FAFAFA;
  --on-accent: #141414;

  --success: #4ADE80;
  --success-subtle: rgba(74, 222, 128, 0.12);
  --warning: #FBBF24;
  --warning-subtle: rgba(251, 191, 36, 0.12);
  --error: #F87171;
  --error-subtle: rgba(248, 113, 113, 0.12);

  /* The storyboard sheet: always paper-white, whatever the theme */
  --page-bg: #FFFFFF;
  --page-text: #141414;
  --page-muted: #6B6B66;
  --page-border: #E4E4E0;
  --page-surface: #F7F7F5;
  /* Selection drawn ON the sheet: the sheet is white in both themes, so the
     selection is always ink — never the theme accent, which is white at night. */
  --page-selection: #141414;
  --page-selection-subtle: rgba(20, 20, 20, 0.08);
  --page-selection-soft: rgba(20, 20, 20, 0.3); /* dashed outlines and drop rings on the sheet */
  --page-on-selection: #FFFFFF;
  /* Marks drawn over an IMPORTED page (the frames found): the page is someone
     else's drawing, often black line work, where ink would vanish. */
  --page-mark: #1A73E8;
  --page-on-mark: #FFFFFF;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
  --shadow-accent: 0 0 0 2px var(--accent-muted);

  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-full: 9999px;

  --ease-fast: 120ms ease;
  --ease-normal: 200ms ease;
  --ease-slow: 300ms ease;

  --nav-height: 48px;
  --page-column-width: 112px;   /* the always-visible column of mini pages */
  --layout-drawer-width: 252px; /* the layout controls, unfolded */
  --layout-drawer-tab: 30px;    /* the layout drawer, folded */
  --demo-banner-height: 36px;
  --z-base: 0;
  --z-canvas: 1;
  --z-page-chrome: 10;
  --z-nav: 100;
  --z-dropdown: 200;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-popover: 1100;
  --z-toast: 1200;
  --z-tooltip: 1300;
  --z-gate: 1400;               /* the phone's "turn sideways" screen, over everything */
  --frame-border-width: 2px;
  --frame-border-color: #000000;
  --frame-aspect: 16/9;
  --crop-scale: 1;
  --crop-x: 0px;
  --crop-y: 0px;
  --grid-rows: 1;
  --grid-cols: 1;
  --zoom-scale: 1;
  --bg-surface: var(--bg-0);
  --bg-panel: var(--bg-2);
  --bg-primary: var(--bg-2);
  --bg-secondary: var(--bg-1);
  --bg-tertiary: var(--bg-3);
  --ink-strong: var(--text-0);
  --ink-muted: var(--text-2);
  --stroke: var(--border-1);
  --stroke-strong: var(--border-2);
  --shadow-float: var(--shadow-lg);
  --tab-active: var(--bg-3);
  --tab-inactive: var(--bg-2);
  --toolbar-bg: var(--bg-1);
  --toolbar-border: var(--border-0);
  --caption-placeholder: var(--text-3);
  --text-primary: var(--text-0);
  --text-secondary: var(--text-2);
  --accent-soft: var(--accent-subtle);
}

/* Paper */
:root[data-theme="light"] {
  color-scheme: light;
  --bg-0: #F7F7F5;
  --bg-1: #FFFFFF;
  --bg-2: #FBFBFA;
  --bg-3: #EFEFEC;
  --bg-4: #E5E5E1;

  --text-0: #141414;
  --text-1: #2B2B2B;
  --text-2: #5C5C58;
  --text-3: #8A8A85;
  --text-4: #B1B1AB;

  --border-0: #E7E7E3;
  --border-1: #DADAD5;
  --border-2: #C6C6C0;

  --accent: #141414;
  --accent-hover: #333333;
  --accent-muted: rgba(20, 20, 20, 0.18);
  --accent-subtle: rgba(20, 20, 20, 0.06);
  --accent-text: #141414;
  --on-accent: #FFFFFF;

  --success: #15803D;
  --success-subtle: rgba(21, 128, 61, 0.10);
  --warning: #B45309;
  --warning-subtle: rgba(180, 83, 9, 0.12);
  --error: #B42318;
  --error-subtle: rgba(180, 35, 24, 0.08);

  --shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.06);
  --shadow-md: 0 4px 12px rgba(20, 20, 20, 0.08);
  --shadow-lg: 0 12px 32px rgba(20, 20, 20, 0.14);
}