/* ============================================================================
   ComicsPRO — DESIGN TOKENS
   ----------------------------------------------------------------------------
   COPIED VERBATIM from the ComicsPRO Design System
   (project 4b6a75b3-4655-412c-861e-6f13187a9065), files:
       tokens/fonts.css · tokens/colors.css · tokens/typography.css
       tokens/spacing.css · tokens/effects.css

   DO NOT EDIT THESE VALUES HERE. This file is the durable layer that carries
   into the WordPress theme unchanged. If a token needs to change, change it in
   the design system and re-copy. Everything below this header is source text
   from those five files, in order, with only the file-boundary banners added.

   2026-08-05: colors.css section updated for the client's official palette
   (Primary #3ABDE3 / Secondary #002D40) per the stakeholder update; the design
   system holds the same change. Re-copy from the design system as usual.
   ============================================================================ */


/* ==== tokens/fonts.css ==================================================== */

/* ComicsPRO webfonts — the OFFICIAL brand typefaces per the ComicsPRO Style
   Guide (both open-license, on Google Fonts):
     Oswald        → titles / headings (all-caps, condensed)
     IBM Plex Sans → subtitles, body & UI
   Confirmed by client style guide — no longer a substitution. */
/* WordPress theme: the Google Fonts @import that sits here in the mockup is
   intentionally omitted. Fonts are self-hosted and declared in theme.json
   (settings.typography.fontFamilies[].fontFace). This is the ONLY edit. */


/* ==== tokens/colors.css =================================================== */

/* ============================================================
   ComicsPRO — Color tokens
   Values taken verbatim from the official ComicsPRO Style Guide
   "Colorways" section. Blue is the primary accent; Bright Red and
   Yellow are used SPARINGLY for accents; body text is black on
   white / light-gray neutrals.
   2026-08-05 client update: official palette is Primary #3ABDE3,
   Secondary #002D40. The navy Secondary now carries links and
   text-blue on light grounds; #0F6E88 remains a DERIVED mid-tone
   only where navy is too dark to read (hover shift, focus rings,
   accents on black — #002D40 is 1.4:1 on black and may never sit
   on an ink ground).
   ============================================================ */
:root {
  /* --- Brand (official) ----------------------------------- */
  --cp-cyan:        #3ABDE3; /* "ComicsPRO Blue" — PRIMARY accent */
  --cp-navy:        #002D40; /* "ComicsPRO Navy" — official SECONDARY (14.5:1 on white) */
  --cp-cyan-deep:   #0F6E88; /* derived: readable mid-tone for hover/focus, and on-ink accents */
  --cp-cyan-tint:   #CFF4FF; /* "ComicsPRO Blue Light" */
  --cp-blue:        var(--cp-navy); /* links/text-blue on light grounds = official Secondary */
  --cp-blue-deep:   #0A5468; /* derived: hover shift off navy (lightens toward primary) */

  /* --- Ink & neutrals (official) -------------------------- */
  --cp-ink:         #000000; /* "Black" — text, outlines */
  --cp-ink-soft:    #1A1A1A; /* practical near-black for long body copy */
  --cp-ink-surface: #37332F; /* "Soft Black" — dark surfaces/buttons, so the
                                black outline stays visible (never pure #000 bg) */
  --cp-ink-70:      #333333;
  --cp-ink-50:      #666666; /* "Dark Gray" */
  --cp-gray-light:  #EFEFEF; /* "Light Gray" */
  --cp-paper:       #FFFFFF; /* page background = White */
  --cp-paper-2:     #EFEFEF; /* subtle panel = Light Gray */
  --cp-white:       #FFFFFF;

  /* --- Accent colors — SPARINGLY (official) --------------- */
  --cp-red:         #FF0000; /* "Bright Red" — sparing accent */
  --cp-red-deep:    #D40000;
  --cp-yellow:      #FFE800; /* "Yellow" — sparing accent */
  --cp-yellow-deep: #C9B600;

  /* ==========================================================
     Semantic aliases — reference THESE in components
     ========================================================== */
  --surface-page:      var(--cp-paper);
  --surface-panel:     var(--cp-paper-2);
  --surface-card:      var(--cp-white);
  --surface-ink:       var(--cp-ink);   /* dark hero / footer / dark buttons — FULL BLACK */
  --surface-cyan:      var(--cp-cyan);
  --surface-cyan-tint: var(--cp-cyan-tint);

  --text-heading:  var(--cp-ink);
  --text-body:     var(--cp-ink-soft);
  --text-muted:    var(--cp-ink-50);
  --text-on-dark:  var(--cp-white);
  --text-on-cyan:  var(--cp-ink);
  --text-link:     var(--cp-blue);
  --text-link-hover: var(--cp-blue-deep);

  --border-ink:    var(--cp-ink-surface);  /* the signature heavy outline — SOFT BLACK */
  --border-soft:   rgba(0,0,0,0.14);

  --accent-primary: var(--cp-cyan);  /* Blue leads */
  --accent-cta:     var(--cp-cyan);  /* primary CTA is Blue, not Red */
  --accent-cta-hover: var(--cp-cyan-deep);

  --focus-ring:    var(--cp-cyan);

  /* status — mapped to the permitted palette (no off-guide green) */
  --status-success: var(--cp-cyan-deep);
  --status-warning: var(--cp-yellow-deep);
  --status-danger:  var(--cp-red);
  --status-info:    var(--cp-blue);
}


/* ==== tokens/typography.css =============================================== */

/* ============================================================
   ComicsPRO — Typography tokens
   Per the official Style Guide:
     Titles / headings → Oswald (all-caps; SemiBold titles, Medium H1,
                         Regular H2), line-spacing 1.15
     Subtitles / body  → IBM Plex Sans
   ============================================================ */
:root {
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-pop:     'Oswald', sans-serif;   /* playful accents share Oswald */
  --font-body:    'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;

  /* Weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 700;

  /* Type scale (guide anchors: Title 48 / Subtitle 24 / H1 24 / H2 16 /
     H3 14 / Body 12pt). Scaled for web/marketing use. 1rem = 16px */
  --fs-display-1: 5rem;     /* 80px hero */
  --fs-display-2: 3.75rem;  /* 60px section hero */
  --fs-h1: 3rem;            /* 48px — Title */
  --fs-h2: 2.25rem;         /* 36px */
  --fs-h3: 1.5rem;          /* 24px — Subtitle / H1 anchor */
  --fs-h4: 1.25rem;         /* 20px */
  --fs-body-lg: 1.1875rem;  /* 19px lead */
  --fs-body: 1.0625rem;     /* 17px default */
  --fs-body-sm: 0.9375rem;  /* 15px */
  --fs-caption: 0.8125rem;  /* 13px */
  --fs-overline: 0.75rem;   /* 12px eyebrow */

  --lh-tight: 1.05;
  --lh-snug: 1.15;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;

  --ls-display: 0.02em;
  --ls-overline: 0.16em;
  --ls-body: 0;
}


/* ==== tokens/spacing.css ================================================== */

/* ============================================================
   ComicsPRO — Spacing, sizing & radius tokens
   4px base grid.
   ============================================================ */
:root {
  --space-0: 0;
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */

  /* layout */
  --container-max: 1200px;
  --container-narrow: 760px;
  --section-y: var(--space-9);
  --gutter: var(--space-5);

  /* radii — comic cards are chunky but not pill; controls ARE pill */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  /* signature heavy comic outline width */
  --stroke: 3px;
  --stroke-hair: 2px;
}


/* ==== tokens/effects.css ================================================== */

/* ============================================================
   ComicsPRO — Effects: shadows, motion
   The house style is the "comic pop": a hard OFFSET shadow (no blur)
   in SOFT BLACK, giving elements a printed sticker / panel feel. Soft shadows
   are used only for gentle elevation on light UI.
   ============================================================ */
:root {
  /* --- Hard comic offset shadows (signature) --- soft black --- */
  --shadow-pop-sm: 3px 3px 0 var(--cp-ink-surface);
  --shadow-pop:    5px 5px 0 var(--cp-ink-surface);
  --shadow-pop-lg: 8px 8px 0 var(--cp-ink-surface);
  --shadow-pop-cyan: 5px 5px 0 var(--cp-cyan);
  --shadow-pop-red:  5px 5px 0 var(--cp-red);

  /* --- Soft elevation (subtle, for menus/inputs) ----------- */
  --shadow-soft-sm: 0 1px 2px rgba(23,19,15,0.10);
  --shadow-soft:    0 4px 14px rgba(23,19,15,0.12);
  --shadow-soft-lg: 0 12px 32px rgba(23,19,15,0.16);

  /* --- Motion ---------------------------------------------- */
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 340ms;

  /* Interaction rule of thumb:
     hover  → translate(-1px,-1px), grow the pop shadow
     press  → translate(2px,2px),  shrink shadow to 0 (button "sticks down") */
}