/*
 * Omar F Sumon — Brand tokens.
 *
 * This is the single source of truth for every colour and font on the site.
 * The same tokens can be overridden without editing CSS:
 *   WordPress admin → Appearance → Landing → Design.
 *
 * Change a value here to change it everywhere. Component styles never hard-code
 * a colour; they only reference these variables.
 *
 * WordPress overrides the tokens below at runtime from Appearance → Landing →
 * Design, using the values in inc/design.php. Editing this file is the no-admin
 * route; the design panel is the no-code route. Both drive the same variables.
 */

:root {
  /* Editable typography roles -------------------------------------------- */
  --font-sans: "DM Sans", Arial, sans-serif;
  --font-heading: "DM Sans", Arial, sans-serif;
  --font-display: "Instrument Serif", Georgia, serif;
  --font-serif: var(--font-display); /* backwards-compatible alias */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Legacy short aliases kept for child-theme compatibility. */
  --accent: var(--color-accent);
  --muted: var(--color-muted);
  --line: var(--color-border);

  /* Editable brand palette (mirrored in Appearance → Landing → Design) ----- */
  --color-accent: #bda8ee;
  --color-accent-hover: #cebcf5;
  --color-accent-soft: #c9b4e9;
  --color-accent-muted: #a391b6;
  --color-accent-ink: #21182e;
  --color-accent-ink-deep: #17121e;
  --color-accent-deep: #675275;
  --color-border-accent: #5b4a74;
  --color-border-accent-soft: #8f7bb0;

  /* Backgrounds and surfaces --------------------------------------------- */
  --color-bg: #101111;
  --color-bg-deep: #0b0c0c;
  --color-bg-alt: #151515;
  --color-surface-1: #141315;
  --color-surface-2: #17141b;
  --color-surface-3: #1c1722;
  --color-surface-4: #21182e;
  --color-surface-5: #242126;
  --color-header-bg: rgba(16, 17, 17, 0.7);
  --color-modal-backdrop: rgba(9, 6, 12, 0.75);
  --color-overlay-92: rgba(16, 17, 17, 0.92);
  --color-overlay-70: rgba(16, 17, 17, 0.7);
  --color-overlay-50: rgba(16, 17, 17, 0.5);
  --color-overlay-30: rgba(16, 17, 17, 0.3);
  --color-overlay-15: rgba(16, 17, 17, 0.15);
  --color-overlay-08: rgba(16, 17, 17, 0.08);
  --color-overlay-02: rgba(16, 17, 17, 0.02);

  /* Text ------------------------------------------------------------------ */
  --color-heading: #f4f1f6;
  --color-heading-soft: #ece7f2;
  --color-heading-warm: #f0eaf6;
  --color-text: #ddd6e4;
  --color-body: #b0a9b8;
  --color-body-soft: #a59fab;
  --color-anchor: #a8a1b0;
  --color-muted: #8f8898;
  --color-muted-soft: #8b8293;
  --color-faint: #5d5666;

  /* Borders and hairlines ------------------------------------------------- */
  --color-border: #2c282f;
  --color-border-soft: #29232f;
  --color-border-faint: #211e25;
  --color-border-strong: #3b3442;
  --color-border-bright: #4b4252;
  --color-hairline: rgba(255, 255, 255, 0.055);
  --color-hairline-soft: rgba(255, 255, 255, 0.031);
  --color-hairline-strong: rgba(255, 255, 255, 0.075);
  --color-hairline-bright: rgba(255, 255, 255, 0.12);

  /* Accent alpha fills ---------------------------------------------------- */
  --color-accent-04: rgba(189, 168, 238, 0.04);
  --color-accent-06: rgba(189, 168, 238, 0.06);
  --color-accent-08: rgba(189, 168, 238, 0.08);
  --color-accent-10: rgba(189, 168, 238, 0.1);
  --color-accent-12: rgba(189, 168, 238, 0.12);
  --color-accent-15: rgba(189, 168, 238, 0.15);
  --color-accent-18: rgba(189, 168, 238, 0.18);
  --color-accent-20: rgba(189, 168, 238, 0.2);
  --color-accent-30: rgba(189, 168, 238, 0.3);
  --color-accent-50: rgba(189, 168, 238, 0.5);
  --color-glow-accent: rgba(157, 102, 193, 0.17);
  --color-glow-sun: rgba(46, 36, 27, 0.19);

  /* Shadows --------------------------------------------------------------- */
  --color-shadow-soft: rgba(0, 0, 0, 0.33);
  --color-shadow: rgba(0, 0, 0, 0.55);
  --color-shadow-deep: rgba(0, 0, 0, 0.75);

  /* Contrast (testimonial) panel ------------------------------------------ */
  --color-invert-bg: #c5b7df;
  --color-invert-heading: #2c2337;
  --color-invert-body: #51405f;
  --color-invert-muted: #7d6695;
  --color-invert-line: #8d789f;
  --color-invert-control: #756183;
  --color-invert-bg-deep: #675275;
  --color-invert-hover: rgba(44, 35, 55, 0.06);

  /* States ---------------------------------------------------------------- */
  --color-success: #b7d59d;
  --color-success-20: rgba(183, 213, 157, 0.19);
  --color-danger: #e7b4b4;
  --color-warning: #8a6100;

  /* Portfolio showcase artwork (kept as its own identity palette) ---------- */
  --showcase-paper: #f9f9f4;
  --showcase-paper-alt: #eeeee7;
  --showcase-paper-deep: #d8d9d1;
  --showcase-paper-line: #dedfd5;
  --showcase-paper-faint: #d3d3cc;
  --showcase-ink: #344330;
  --showcase-ink-soft: #3c4639;
  --showcase-ink-muted: #68685f;
  --showcase-olive: #9a9d7f;
  --showcase-cream: #f4eee4;
  --showcase-cream-line: #e4d9c9;
  --showcase-brown: #5e3c28;
  --showcase-brown-deep: #64432e;
  --showcase-brown-soft: #f7efe5;
  --showcase-sage: #a7ad94;
  --showcase-sage-deep: #414632;
  --showcase-warm-1: #dbc1a9;
  --showcase-warm-2: #b69b88;
}

/* Typography roles ------------------------------------------------------- */
html {
  background: var(--color-bg);
}

body {
  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--font-sans);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
}

.wordmark,
.button,
button,
input,
select,
textarea {
  font-family: var(--font-sans);
}

em,
i {
  font-style: italic;
}

/* The display-serif role is opt-in per component. */
.hero h2 em,
.cta-inner h2 em,
.page-title em,
.page-title-sub em,
.signature,
.sunday-logo,
.forma-intro > div,
.sunday-copy > div,
.prose blockquote,
.journal-fallback,
.portrait-initials,
.about-quote .quote-mark {
  font-family: var(--font-display);
}

::selection {
  background: var(--color-accent);
  color: var(--color-accent-ink-deep);
}

:focus-visible {
  outline: 2px solid var(--color-accent-hover);
  outline-offset: 5px;
}