/**
 * Profound Logic — Design Tokens (single source of truth)
 * ============================================================================
 * This file is the ONE place the brand's design decisions live. Every marketing
 * page loads it (main.css @imports it, and every page loads main.css), so a
 * change here propagates across the entire site.
 *
 * The tokens are identified from the Profound Logic brand — the palette is
 * sampled from the logo (blue + orange), the type faces are Open Sans (primary)
 * and Calibri (secondary), and the spacing/scale system matches the built pages.
 * There is no external Figma file attached to this task; the live brand design
 * IS the source of truth, so these tokens document and codify it. Point a real
 * Figma export at this file and only the values in the two layers below need to
 * change.
 *
 * ONE CAVEAT — a font is not delivered by a token. --font-primary only names a
 * face; the file is fetched by FONT_LINKS in .build/assemble.cjs, written into
 * every page head. Changing the face here means also changing that constant and
 * re-running `node .build/inject-fonts.cjs`. See DESIGN-SYSTEM.md > Typography.
 *
 * Two layers:
 *   1. PRIMITIVES  (--pl-*)   raw, named brand values. Change a brand color here
 *                             and it cascades everywhere through the aliases.
 *   2. SEMANTIC    (--color-*, --font-*, --spacing-*, ...) role-based tokens the
 *                             stylesheets and pages actually reference. These map
 *                             onto primitives, so components never hard-code a hex.
 *
 * To re-skin the site: edit a PRIMITIVE (e.g. --pl-blue-600) and every button,
 * link, card border, gradient, and hero that resolves to it updates at once.
 * ============================================================================ */

:root {
  /* ==========================================================================
     1. PRIMITIVES — raw brand values (sampled from the Profound Logic logo)
     ========================================================================== */

  /* Brand blue ramp (logo blue is the anchor at 600) */
  --pl-blue-50:  #F7FAFF;   /* faint blue-tinted "cloud" background */
  --pl-blue-400: #3F8ECF;   /* logo light/sky blue — secondary */
  --pl-blue-600: #0E68B7;   /* logo blue — brand primary */
  --pl-blue-700: #0A5095;   /* deeper blue — gradients / hover */
  --pl-blue-800: #0B3D6B;   /* dark blue */
  --pl-navy-900: #0B3050;   /* deep navy — footer / CTA band */

  /* One brand orange in every context and state (2026-10-29). */
  --pl-orange-500: #F57700; /* logo orange — accent */

  /* Neutrals */
  --pl-white:    #FFFFFF;
  --pl-gray-100: #F1F3F6;   /* light gray surface */
  --pl-gray-300: #CCD0D5;   /* borders / hairlines */
  --pl-gray-600: #515A66;   /* slate — secondary / body-on-light */
  --pl-gray-700: #454545;   /* neutral body text */
  --pl-ink-900:  #15233A;   /* deep navy-charcoal — headings */

  /* Status ramp — pass/warn/fail signalling for the internal admin tools (the
     marketing pages have no use for it: on those, emphasis is orange's job).
     Red/green retain their contrast ramps. Orange warning foreground follows
     the explicit single-orange decision; do not claim AA contrast for it. */
  --pl-red-700:   #B42318;
  --pl-red-50:    #FDECEA;
  --pl-amber-700: var(--pl-orange-500); /* warning foreground follows the single orange */
  --pl-amber-50:  #FDF3E3;
  --pl-green-800: #166534;
  --pl-green-50:  #E8F5EE;

  /* ==========================================================================
     2. SEMANTIC TOKENS — role-based names the CSS + pages reference
     ========================================================================== */

  /* -- Color: brand ------------------------------------------------------- */
  --color-primary-blue: var(--pl-blue-600);  /* primary actions, links, icons */
  --color-sky-blue:     var(--pl-blue-400);  /* secondary blue / gradients */
  --color-cyan-accent:  var(--pl-blue-400);
  --color-deep-blue:    var(--pl-blue-700);  /* gradient stops, hover */
  --color-dark-blue:    var(--pl-blue-800);  /* dark hero / CTA gradient */
  --color-deep-navy:    var(--pl-navy-900);  /* footer + dark stat band */

  /* Orange is an EMPHASIS-ONLY accent — use it to make one thing on a page
     stand out (an eyebrow, a required-field marker, an accent card icon).
     It is not a general-purpose brand color: for anything structural or
     repeated, reach for the blue ramp above. */
  --color-accent-orange:      var(--pl-orange-500);  /* accent / emphasis */
  /* -- Color: neutrals / surfaces ---------------------------------------- */
  --color-black:       var(--pl-ink-900);   /* headings */
  --color-text:        var(--pl-gray-700);  /* body copy */
  --color-slate-gray:  var(--pl-gray-600);  /* secondary text */
  --color-border:      var(--pl-gray-300);  /* borders */
  --color-light-gray:  var(--pl-gray-100);  /* light surface */
  --color-cloud-white: var(--pl-blue-50);   /* blue-tinted section background */
  --color-white:       var(--pl-white);

  /* Legacy aliases (older markup referenced these names) */
  --color-royal-blue: var(--pl-blue-600);
  --color-pl-blue:    var(--pl-blue-700);

  /* -- Color: status (internal admin tools only) -------------------------- */
  --color-status-error:    var(--pl-red-700);
  --color-status-error-bg: var(--pl-red-50);
  --color-status-warn:     var(--pl-amber-700);
  --color-status-warn-bg:  var(--pl-amber-50);
  --color-status-ok:       var(--pl-green-800);
  --color-status-ok-bg:    var(--pl-green-50);

  /* -- Typography --------------------------------------------------------- */
  /* Open Sans (Google Fonts) is the brand face. It is loaded by a <link> in the
     <head> of every page — one variable file covering weights 300-800, roman +
     italic. Everything after it in the stack is a system fallback for the brief
     window before the webfont arrives (and for offline/blocked-CDN cases). */
  --font-primary: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto,
                  'Helvetica Neue', Arial, sans-serif;

  /* Calibri is the secondary face. It is a Microsoft SYSTEM font, not a
     webfont — there is nothing to load and nothing we can load, so on a machine
     without it the stack below decides what people actually see:
       Carlito     open-source, metric-compatible clone of Calibri (identical
                   advance widths); ships with LibreOffice and most Linux
                   distros, so Linux/ChromeOS land here and look unchanged.
       Segoe UI    Windows editions that somehow lack Calibri (N/KN SKUs).
       system-ui / -apple-system
                   SF Pro on macOS/iOS without Office, Roboto on Android — both
                   humanist enough to keep the "softer than the headline face"
                   contrast Calibri is here to provide.
       Helvetica Neue / Arial
                   last resort. ~9.5% wider than Calibri at the same px, with a
                   ~10% larger x-height, so secondary text set in it runs
                   visibly bigger and squarer. Keep the stack in this order.
     No rule consumes this token yet — see DESIGN-SYSTEM.md > Typography. */
  --font-secondary: Calibri, Carlito, 'Segoe UI', system-ui, -apple-system,
                    'Helvetica Neue', Arial, sans-serif;

  --font-code:    'JetBrains Mono', Consolas, Monaco, 'Courier New', monospace;

  /* Type scale (matches the built pages: h1 48 / h2 36 / h3 24 / h4 20 …) */
  --font-size-h1:    clamp(2rem, 3.6vw, 3rem);      /* 48px */
  --font-size-h2:    clamp(1.75rem, 2.8vw, 2.25rem);   /* 36px */
  --font-size-h3:    1.5rem;    /* 24px */
  --font-size-h4:    1.25rem;   /* 20px */
  --font-size-lead:  1.25rem;   /* 20px intro copy */
  --font-size-body:  1.125rem;  /* 18px readable body copy */
  --font-size-sm:    0.9375rem; /* 15px */
  --font-size-xs:    0.8125rem; /* 13px eyebrow / meta */
  --font-size-2xs:   0.75rem;   /* 12px labels */

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold:800;

  --line-height-tight: 1.2;   /* headings */
  --line-height-base:  1.6;   /* body */
  --line-height-lead:  1.7;   /* lead paragraphs */

  --letter-spacing-tight:   -0.02em; /* large headings */
  --letter-spacing-eyebrow:  0.08em; /* uppercase kickers */

  /* -- Spacing scale ------------------------------------------------------ */
  --spacing-xs:  0.5rem;  /*  8px */
  --spacing-sm:  1rem;    /* 16px */
  --spacing-md:  1.5rem;  /* 24px */
  --spacing-lg:  2rem;    /* 32px */
  --spacing-xl:  3rem;    /* 48px */
  --spacing-2xl: 4rem;    /* 64px */
  --spacing-3xl: 6rem;    /* 96px */

  /* Exact section boundary requested for all existing heroes (2026-10-29). */
  --hero-content-gap: 50px;
  --hero-content-width: 1400px; /* Approved homepage alignment reference. */

  /* -- Radii -------------------------------------------------------------- */
  --radius-sm:    8px;    /* buttons, dropdown links */
  --radius-md:    12px;   /* feature cards, dropdowns, media */
  --radius-lg:    14px;   /* product / resource cards */
  --radius-pill:  999px;  /* pills / chips */
  --radius-round: 50%;    /* dots / avatars */

  /* -- Elevation / shadows ------------------------------------------------ */
  --shadow-sm:       0 4px 12px rgba(14, 104, 183, 0.12);
  --shadow-md:       0 8px 24px rgba(14, 104, 183, 0.10);
  --shadow-lg:       0 10px 30px rgba(14, 104, 183, 0.12);
  --shadow-dropdown: 0 16px 40px rgba(11, 48, 80, 0.14);
  --shadow-xl:       0 20px 60px rgba(0, 0, 0, 0.15);

  /* -- Layout ------------------------------------------------------------- */
  --max-width:        1200px;
  --max-width-narrow: 900px;
  --header-height:    72px;
  --container-gutter: var(--spacing-lg);

  /* -- Motion ------------------------------------------------------------- */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;

  /* -- Z-index ------------------------------------------------------------ */
  --z-header:   1000;
  --z-dropdown: 1001;
}