/* =========================================================================
   PrimoCheck Design System — Tokens
   colors_and_type.css

   Load order:
     1. <link rel="preconnect" href="https://fonts.googleapis.com">
     2. <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
     3. <link rel="stylesheet" href="colors_and_type.css">

   Companion: README.md > Visual Foundations
   ========================================================================= */

:root {
  /* -----------------------------------------------------------------------
     COLOR — primitives
     ----------------------------------------------------------------------- */

  /* Lime — the brand accent. Use one surface per viewport. */
  --lime-50:  #F6FFE0;
  --lime-100: #ECFFC0;
  --lime-200: #DCFF92;
  --lime-300: #CFFC68;
  --lime-400: #D2FB54;
  --lime-500: #C5FB45;   /* canonical accent */
  --lime-600: #A6E223;
  --lime-700: #84B81C;
  --lime-800: #5E8313;
  --lime-900: #3D5A0A;

  /* Forest — deep dark green for surfaces, lockups, photo overlays */
  --forest-50:  #EAF1ED;
  --forest-100: #C8D8CD;
  --forest-200: #9DB9A5;
  --forest-300: #6E9379;
  --forest-400: #406B4F;
  --forest-500: #2A553C;
  --forest-600: #1F3F2C;
  --forest-700: #1E3A2E;   /* logo lockup background */
  --forest-800: #142319;
  --forest-900: #0E1A14;   /* primary dark canvas */

  /* Warm neutrals — paper / ink (NOT blue-grey; warm) */
  --paper-50:  #F6F4EF;    /* primary light surface */
  --paper-100: #EFEBE2;
  --paper-200: #E2DCCE;
  --paper-300: #CFC6B2;
  --paper-400: #A89C82;
  --paper-500: #7A6F58;

  --ink-900: #0A0A0A;      /* body text on light */
  --ink-800: #1A1A1A;
  --ink-700: #2C2C2A;
  --ink-600: #4A4A45;
  --ink-500: #6E6E68;
  --ink-400: #9A9A92;
  --ink-300: #C7C7BF;
  --ink-200: #E6E5DE;
  --ink-100: #F2F1EB;

  /* Semantic — kept desaturated so lime stays the loud channel */
  --success: #4FA86D;
  --warning: #E6A23C;
  --danger:  #D14545;
  --info:    #4A7DC9;

  /* -----------------------------------------------------------------------
     COLOR — semantic / role-based
     ----------------------------------------------------------------------- */

  /* Surfaces */
  --surface-bg:        var(--paper-50);
  --surface-bg-alt:    #FFFFFF;
  --surface-bg-dark:   var(--forest-900);
  --surface-bg-deep:   var(--forest-700);
  --surface-card:      #FFFFFF;
  --surface-card-dark: var(--forest-800);

  /* Foregrounds */
  --fg-1: var(--ink-900);          /* primary text on light */
  --fg-2: var(--ink-600);          /* secondary text on light */
  --fg-3: var(--ink-500);          /* tertiary / captions */
  --fg-disabled: var(--ink-400);

  --fg-on-dark-1: var(--paper-50); /* primary text on dark */
  --fg-on-dark-2: rgba(246, 244, 239, 0.72);
  --fg-on-dark-3: rgba(246, 244, 239, 0.54);

  /* Borders */
  --border-subtle:    rgba(10, 10, 10, 0.08);
  --border-strong:    rgba(10, 10, 10, 0.18);
  --border-on-dark:   rgba(246, 244, 239, 0.12);
  --border-on-dark-strong: rgba(246, 244, 239, 0.24);

  /* Accent roles */
  --accent:           var(--lime-500);
  --accent-hover:     var(--lime-400);
  --accent-press:     var(--lime-600);
  --accent-fg:        var(--ink-900);   /* text/icon on lime */

  /* Focus */
  --focus-ring:       var(--lime-500);
  --focus-ring-offset: 2px;
  --focus-ring-width:  2px;

  /* -----------------------------------------------------------------------
     TYPOGRAPHY
     ----------------------------------------------------------------------- */

  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Type scale — clamp() so it works across artifact sizes */
  --fs-display-1: clamp(56px, 7.2vw, 120px);
  --fs-display-2: clamp(44px, 5.6vw, 88px);
  --fs-h1:        clamp(36px, 4.4vw, 64px);
  --fs-h2:        clamp(28px, 3.2vw, 44px);
  --fs-h3:        clamp(22px, 2.2vw, 32px);
  --fs-h4:        20px;
  --fs-body-lg:   18px;
  --fs-body:      16px;
  --fs-body-sm:   14px;
  --fs-caption:   13px;
  --fs-micro:     11px;     /* ALL CAPS labels */

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.12em;

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

  /* -----------------------------------------------------------------------
     SPACING — 4pt grid
     ----------------------------------------------------------------------- */
  --space-0: 0;
  --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;
  --space-10: 128px;

  --gutter-mobile:  32px;
  --gutter-desktop: 80px;

  /* -----------------------------------------------------------------------
     RADII
     ----------------------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* -----------------------------------------------------------------------
     SHADOW / ELEVATION — minimal
     ----------------------------------------------------------------------- */
  --shadow-none: 0 0 #0000;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px -8px rgba(0,0,0,0.08);
  --shadow-pop:  0 2px 4px rgba(0,0,0,0.06), 0 16px 40px -12px rgba(0,0,0,0.18);
  --shadow-inset-hairline: inset 0 0 0 1px var(--border-subtle);

  /* -----------------------------------------------------------------------
     MOTION
     ----------------------------------------------------------------------- */
  --ease-out:   cubic-bezier(.2,.7,.2,1);
  --ease-in:    cubic-bezier(.55,.1,.85,.4);
  --ease-in-out: cubic-bezier(.65,.05,.35,1);
  --dur-press:  120ms;
  --dur-hover:  200ms;
  --dur-reveal: 400ms;
  --dur-hero:   800ms;

  /* -----------------------------------------------------------------------
     ICONS
     ----------------------------------------------------------------------- */
  --icon-sm: 16px;
  --icon-md: 24px;
  --icon-lg: 32px;
  --icon-xl: 48px;
  --icon-stroke: 1.75;

  /* -----------------------------------------------------------------------
     LAYOUT
     ----------------------------------------------------------------------- */
  --content-max: 1440px;
  --content-narrow: 920px;
  --nav-height: 80px;
}

/* =========================================================================
   SEMANTIC TYPOGRAPHY CLASSES
   ========================================================================= */

.type-display-1,
.type-display-2,
.type-h1,
.type-h2,
.type-h3,
.type-h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
}

.type-display-1 { font-size: var(--fs-display-1); font-weight: var(--weight-medium); }
.type-display-2 { font-size: var(--fs-display-2); font-weight: var(--weight-medium); }
.type-h1        { font-size: var(--fs-h1); }
.type-h2        { font-size: var(--fs-h2); line-height: var(--lh-snug); }
.type-h3        { font-size: var(--fs-h3); line-height: var(--lh-snug); }
.type-h4        { font-size: var(--fs-h4); line-height: var(--lh-snug); letter-spacing: var(--tracking-normal); }

.type-body-lg,
.type-body,
.type-body-sm,
.type-caption {
  font-family: var(--font-body);
  color: var(--fg-2);
  font-weight: var(--weight-regular);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-normal);
  text-wrap: pretty;
  margin: 0;
}
.type-body-lg { font-size: var(--fs-body-lg); }
.type-body    { font-size: var(--fs-body); }
.type-body-sm { font-size: var(--fs-body-sm); }
.type-caption { font-size: var(--fs-caption); color: var(--fg-3); }

.type-micro {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-2);
  margin: 0;
}

.type-mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum", "zero";
}

/* On-dark variants */
.on-dark .type-display-1,
.on-dark .type-display-2,
.on-dark .type-h1,
.on-dark .type-h2,
.on-dark .type-h3,
.on-dark .type-h4 { color: var(--fg-on-dark-1); }
.on-dark .type-body-lg,
.on-dark .type-body,
.on-dark .type-body-sm { color: var(--fg-on-dark-2); }
.on-dark .type-caption { color: var(--fg-on-dark-3); }
.on-dark .type-micro   { color: var(--fg-on-dark-2); }

/* =========================================================================
   BASELINE RESET (minimal — opt-in where used)
   ========================================================================= */

.pc-base {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--surface-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.pc-base *,
.pc-base *::before,
.pc-base *::after { box-sizing: border-box; }

/* =========================================================================
   FOCUS — global
   ========================================================================= */

.pc-base :focus { outline: none; }
.pc-base :focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-xs);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}