/* Platypology webfonts — all three families are on Google Fonts.
   Consumers linking styles.css get these automatically. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Pixelify+Sans:wght@400;500;600;700&display=swap');

/* Platypology — Color Palette
   "Retro mascot energy. Modern studio restraint."
   Playful and memorable without making consulting / apps / AI feel unserious. */
:root {
  /* ---- Base palette (brand book p.04) ---- */
  --platypus-blue: #28B8D8;   /* primary actions, links, highlights */
  --deep-navy:     #171A3A;   /* text, outlines, footer, dark UI */
  --arcade-purple: #6B3FA0;   /* secondary accents, hover states */
  --magenta:       #D94F9D;   /* tiny hits of weirdness */
  --cream:         #FFF4D8;   /* warm panels and cards */
  --green:         #49A34B;   /* accent dividers, success states */
  --orange:        #F29A2E;   /* CTA sparks and tags */
  --sky:           #DDF7FF;   /* light product cards */
  --off-white:     #FBF6EA;   /* warm off-white — dominant page ground (50%) */
  --white:         #FFFFFF;

  /* ---- Tints & shades (derived, for hovers/borders/fills) ---- */
  --blue-deep:     #1E93AD;   /* blue pressed / darker */
  --blue-soft:     #7FD6EA;   /* blue tint */
  --purple-deep:   #55307F;   /* purple pressed */
  --magenta-deep:  #B93B83;
  --green-deep:    #3B8140;
  --orange-deep:   #D97F16;
  --navy-80:       #2A2E52;   /* raised dark surface */
  --navy-60:       #4A4E72;   /* muted navy text */
  --cream-deep:    #F4E4B8;   /* cream border / pressed */

  /* ---- Semantic aliases ---- */
  --color-primary:        var(--platypus-blue);
  --color-primary-hover:  var(--arcade-purple);   /* purple = hover per brand */
  --color-primary-active: var(--blue-deep);
  --color-secondary:      var(--arcade-purple);
  --color-accent:         var(--magenta);

  --text-strong:   var(--deep-navy);
  --text-body:     #23264A;
  --text-muted:    var(--navy-60);
  --text-on-dark:  var(--off-white);
  --text-on-primary: var(--deep-navy);
  --text-link:     var(--platypus-blue);
  --text-link-hover: var(--arcade-purple);

  --surface-page:   var(--off-white);
  --surface-card:   var(--white);
  --surface-cream:  var(--cream);
  --surface-sky:    var(--sky);
  --surface-dark:   var(--deep-navy);
  --surface-dark-raised: var(--navy-80);

  --border-outline: var(--deep-navy); /* signature crisp pixel outline */
  --border-subtle:  #E4DDCB;          /* hairline on off-white */
  --border-cream:   var(--cream-deep);

  --state-success: var(--green);
  --state-warning: var(--orange);
  --state-info:    var(--platypus-blue);

  --focus-ring: var(--magenta);
}

/* Platypology — Typography (brand book p.05: "No Inter.")
   Headings: Space Grotesk · Body: IBM Plex Sans
   Buttons: Space Grotesk Medium · Pixel accents: Pixelify Sans (badges only) */
:root {
  /* ---- Families ---- */
  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;
  --font-button:  'Space Grotesk', system-ui, sans-serif;
  --font-pixel:   'Pixelify Sans', 'Space Grotesk', monospace;

  /* ---- Weights ---- */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:    700; /* @kind font */

  /* ---- Type scale (rem, 16px base) ---- */
  --fs-display: 4.5rem;   /* 72px hero */
  --fs-h1:      3rem;     /* 48px */
  --fs-h2:      2.25rem;  /* 36px */
  --fs-h3:      1.5rem;   /* 24px */
  --fs-h4:      1.25rem;  /* 20px */
  --fs-lead:    1.25rem;  /* 20px intro paragraph */
  --fs-body:    1rem;     /* 16px */
  --fs-sm:      0.875rem; /* 14px */
  --fs-xs:      0.75rem;  /* 12px caption / badge */

  /* ---- Line heights ---- */
  --lh-tight:   1.05; /* @kind other */
  --lh-heading: 1.15; /* @kind other */
  --lh-snug:    1.35; /* @kind other */
  --lh-body:    1.6; /* @kind other */

  /* ---- Letter spacing ---- */
  --ls-display: -0.02em; /* @kind other */
  --ls-heading: -0.01em; /* @kind other */
  --ls-body:    0; /* @kind other */
  --ls-pixel:   0.02em; /* @kind other */
  --ls-caps:    0.08em; /* @kind other */
}

/* Platypology — Spacing & layout (8px base rhythm) */
:root {
  --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: 24px;             /* default gap between UI elements */
  --section-y: 96px;         /* vertical padding between page sections */
  --container-max: 1120px;   /* max content width */
  --container-narrow: 720px; /* reading measure */
}

/* Platypology — Effects: radius, borders, shadows
   Signature move: crisp navy outline + hard offset "pixel" shadow (no blur).
   "Keep pixel edges crisp." "Let the logo be weird. Let the layout be clean." */
:root {
  /* ---- Radius ---- (modern restraint: soft, never pill-y on structure) */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;   /* default cards, inputs */
  --radius-lg: 18px;   /* large panels */
  --radius-pill: 999px; /* badges/tags only */

  /* ---- Border widths ---- */
  --border-hair: 1px;
  --border-line: 2px;   /* default crisp outline */
  --border-bold: 3px;   /* emphasis / interactive outline */

  /* ---- Hard pixel shadows (offset, zero blur) — the retro tell ---- */
  --shadow-pixel:    3px 3px 0 0 var(--deep-navy);
  --shadow-pixel-lg: 5px 5px 0 0 var(--deep-navy);
  --shadow-pixel-blue: 3px 3px 0 0 var(--platypus-blue);

  /* ---- Soft shadows (modern restraint, for elevated/floating UI) ---- */
  --shadow-soft: 0 2px 8px rgba(23,26,58,0.08);
  --shadow-raised: 0 10px 30px rgba(23,26,58,0.12);

  /* ---- Motion ---- (snappy, slightly springy — never sluggish) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur: 180ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
}