/*
  Plain Sight Design Tokens — single source of truth. Never hardcode values in page files.
  plainsight.agency
*/

/* ==========================================================================
   FONTS
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  --font-mono:  'IBM Plex Mono', monospace;  /* wordmark, headings, labels, nav */
  --font-body:  'DM Sans', sans-serif;        /* body copy, cards, UI */

  /* ==========================================================================
     BRAND COLORS
     ========================================================================== */

  --ps-blue:       #377FFC;  /* circle geometry / stroke only — never text or UI */
  --ps-violet:     #6E6BA6;  /* UI accent — labels, links, active states only */
  --ps-black:      #0C0C0C;
  --ps-off-black:  #141414;
  --ps-charcoal:   #242424;
  --ps-muted:      #888884;
  --ps-light:      #D0CEC8;
  --ps-off-white:  #F4F2EE;
  --ps-white:      #FAFAF8;

  /* ==========================================================================
     LIGHT MODE (default)
     ========================================================================== */

  --bg-primary:    #F4F2EE;
  --bg-surface:    #FAFAF8;
  --bg-inset:      #ECE9E3;

  --border:        #D8D5CF;
  --border-strong: #C4C0B8;

  --text-primary:   #0C0C0C;
  --text-secondary: #3A3A38;
  --text-tertiary:  #666662;
  --text-muted:     #9C9990;

  /* ==========================================================================
     CIRCLE SYSTEM
     ========================================================================== */

  --circle-stroke:      #377FFC;
  --circle-sw:          1.2px;   /* foreground stroke-width */
  --circle-fill-light:  rgba(55, 127, 252, 0.05);
  --circle-fill-dark:   rgba(55, 127, 252, 0.04);
  --circle-mix-light:   rgba(55, 127, 252, 0.10);  /* intersection zones, light bg */
  --circle-mix-dark:    rgba(55, 127, 252, 0.09);  /* intersection zones, dark bg */
  --circle-ghost-sw:    0.5px;  /* background / decorative circles, 20–25% opacity */

  /* ==========================================================================
     TYPOGRAPHY SCALE
     ========================================================================== */

  --text-label:          10px;   /* section labels: mono, uppercase, ls 0.2em */
  --text-nav:            12px;   /* nav links: mono, uppercase, ls 0.15em */
  --text-xs:             12px;
  --text-sm:             14px;
  --text-base:           16px;
  --text-md:             18px;
  --text-lg:             20px;
  --text-xl:             24px;
  --text-2xl:            32px;
  --text-3xl:            40px;
  --text-4xl:            52px;
  --text-5xl:            64px;

  --ls-label:            0.2em;   /* section label letter-spacing */
  --ls-nav:              0.15em;  /* nav / tagline letter-spacing */
  --ls-wordmark:        -0.01em;  /* wordmark tracking */

  --lh-tight:            1.1;
  --lh-snug:             1.3;
  --lh-normal:           1.5;
  --lh-relaxed:          1.7;

  /* ==========================================================================
     SPACING
     ========================================================================== */

  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;
  --space-30:   120px;  /* section vertical padding */

  /* ==========================================================================
     LAYOUT
     ========================================================================== */

  --max-width:       1100px;  /* max content width, centered */
  --section-pad:     120px;   /* section top/bottom padding */
  --gap-2col:         48px;   /* 2-column grid gap */
  --gap-3col:         32px;   /* 3-column grid gap */
  --gap-flush:         2px;   /* flush grid panel gap */

  --border-width:      1px;   /* section dividers */
  --radius-sm:         4px;
  --radius-md:         8px;
  --radius-lg:        12px;
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary:    #0C0C0C;
    --bg-surface:    #141414;
    --bg-inset:      #1A1A1A;

    --border:        #242424;
    --border-strong: #333330;

    --text-primary:   #F4F2EE;
    --text-secondary: #D0CEC8;
    --text-tertiary:  #888884;
    --text-muted:     #555552;

    --circle-fill-light: rgba(55, 127, 252, 0.04);  /* mapped to dark values in dark mode */
    --circle-mix-light:  rgba(55, 127, 252, 0.09);
  }
}