/* ==========================================================================
   Dreams To Apps: canonical design tokens. Every site colour is defined here.
   Dark is the default; d2a-theme.js and the inline head script set data-theme.
   ========================================================================== */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces */
  --bg-page: #0E0E10;
  --bg-card: #17171A;
  --bg-card-elevated: #17171A;
  --bg-surface: #17171A;
  --bg-subtle: #1F1F23;
  --bg-header: #0E0E10;
  --border: #26262B;
  --border-strong: #6E6E78;

  /* Text */
  --text-primary: #F2F2F2;
  --text-secondary: #A0A0A8;
  --text-muted: #A0A0A8;
  --text-light: #A0A0A8;
  --text-on-inverse: #0E0E10;

  /* Accent: fills use --accent, text uses --accent-text */
  --accent: #FF7A1A;
  --accent-hover: #FF8F3D;
  --accent-ink: #111113;
  --accent-text: #FF7A1A;
  --accent-tint: #24190F;
  --accent-border: #4A2E18;
  --focus-ring: #FF8F3D;
  --success: #4CC38A;
  --danger: #FF8A80;
  --danger-tint: #2A1716;

  /* Gloss, allowed only on the hero and main CTA cards */
  --gloss-hero: radial-gradient(60% 70% at 78% 0%, rgba(255, 122, 26, 0.10) 0%, transparent 70%);
  --gloss-cta: linear-gradient(160deg, rgba(255, 255, 255, 0.05) 0%, transparent 45%);

  /* Depth */
  --shadow-sm: none;
  --shadow-md: none;
  --card-shadow: none;
  --card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.6);
}

/* Sample-work mockups read as screenshots, so they keep light tokens in both themes */
[data-theme="light"],
.o-browser, .o-phone, .o-chat, .o-seo, .o-lead, .o-brand, .o-admin,
.phone-screen, .laptop-screen, .jd-white-box, .jd-fullscreen-body {
  color-scheme: light;

  --bg-page: #FAFAFA;
  --bg-card: #FFFFFF;
  --bg-card-elevated: #FFFFFF;
  --bg-surface: #FFFFFF;
  --bg-subtle: #F2F2F4;
  --bg-header: #FAFAFA;
  --border: #E4E4E8;
  --border-strong: #85858F;

  --text-primary: #111113;
  --text-secondary: #55555E;
  --text-muted: #55555E;
  --text-light: #55555E;
  --text-on-inverse: #FFFFFF;

  --accent: #FF7A1A;
  --accent-hover: #FF8F3D;
  --accent-ink: #111113;
  /* #FF7A1A on white is only 2.6:1, so accent text uses a darker shade to pass AA */
  --accent-text: #B84A00;
  --accent-tint: #FFF3EA;
  --accent-border: #FFD9BF;
  --focus-ring: #B84A00;
  --success: #0B7A52;
  --danger: #B3261E;
  --danger-tint: #FDECEA;

  --gloss-hero: radial-gradient(60% 70% at 78% 0%, rgba(255, 122, 26, 0.08) 0%, transparent 70%);
  --gloss-cta: linear-gradient(160deg, rgba(255, 122, 26, 0.05) 0%, transparent 45%);

  --shadow-sm: none;
  --shadow-md: none;
  --card-shadow: none;
  --card-shadow-hover: 0 8px 24px rgba(17, 17, 19, 0.08);
  --shadow-overlay: 0 16px 48px rgba(17, 17, 19, 0.18);
}

:root {
  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Geometry */
  --radius-bento: 16px;
  --radius-card: 16px;
  --radius-btn: 10px;
  --radius-pill: 9999px;

  /* Type */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --container-max: 1220px;
}

/* The earlier multi-colour palette names now resolve to neutrals plus one accent */
:root,
[data-theme],
.o-browser, .o-phone, .o-chat, .o-seo, .o-lead, .o-brand, .o-admin,
.phone-screen, .laptop-screen, .jd-white-box, .jd-fullscreen-body {
  --card-border: var(--border);
  --border-soft: var(--border);
  --card-shadow-colored: var(--card-shadow-hover);

  --d2a-orange: var(--accent);
  --d2a-orange-hover: var(--accent-hover);
  --d2a-orange-tint: var(--accent-tint);
  --d2a-orange-border: var(--accent-border);
  --d2a-orange-text: var(--accent-text);

  --d2a-purple: var(--text-secondary);
  --d2a-purple-hover: var(--text-primary);
  --d2a-purple-tint: var(--bg-card);
  --d2a-purple-border: var(--border);
  --d2a-purple-text: var(--text-secondary);

  --d2a-teal: var(--success);
  --d2a-teal-hover: var(--success);
  --d2a-teal-tint: var(--bg-card);
  --d2a-teal-border: var(--border);
  --d2a-teal-text: var(--success);

  --d2a-yellow: var(--text-secondary);
  --d2a-yellow-hover: var(--text-primary);
  --d2a-yellow-tint: var(--bg-card);
  --d2a-yellow-border: var(--border);
  --d2a-yellow-text: var(--text-secondary);

  --d2a-pink: var(--text-secondary);
  --d2a-pink-hover: var(--text-primary);
  --d2a-pink-tint: var(--bg-card);
  --d2a-pink-border: var(--border);
  --d2a-pink-text: var(--text-secondary);

  --d2a-blue: var(--text-secondary);
  --d2a-blue-hover: var(--text-primary);
  --d2a-blue-tint: var(--bg-card);
  --d2a-blue-border: var(--border);
  --d2a-blue-text: var(--text-secondary);
}