/* Sted design tokens — web custom properties.
   Mirrors tokens/sted.tokens.json (1.0.0-batch1). Statuses in tokens/status.json.
   Load assets/fonts/inter/inter.css before this file for offline Inter. */

:root {
  /* core */
  --sted-ink: #141313;
  --sted-yellow: #FFD400;
  --sted-white: #FFFFFF;
  --sted-cream: #FCF3EB;
  --sted-subtle: #F7F7F5;
  --sted-border: #E8E7E4;
  --sted-text-secondary: #6F6D69;

  /* supportive */
  --sted-supportive-pink: #FD95A0;
  --sted-supportive-blue: #83B0FC;
  --sted-supportive-green: #B2D78F;
  --sted-supportive-purple: #C998FA;
  --sted-supportive-yellow: #FFE45E;

  /* dark set (used by the dark theme mapping below) */
  --sted-dark-bg: #10100F;
  --sted-dark-surface: #181817;
  --sted-dark-subtle: #20201E;
  --sted-dark-border: #2B2B29;
  --sted-dark-text: #F7F6F3;
  --sted-dark-text-secondary: #A7A49F;

  /* source tiles (PROPOSED) */
  --sted-tile-github: #DDD2FF;
  --sted-tile-x: #E9E3DB;
  --sted-tile-youtube: #FFC2C2;
  --sted-tile-instagram: #FFD6E5;
  --sted-tile-tiktok: #C9F3F2;
  --sted-tile-linkedin: #D6E7FF;
  --sted-tile-notion: #D6E7FF;
  --sted-tile-reddit: #FFC9AE;
  --sted-tile-pinterest: #FFC6CE;
  --sted-tile-substack: #FFE0B0;
  --sted-tile-medium: #D9E8D9;
  --sted-tile-threads: #DCDCDC;
  --sted-tile-bluesky: #C7E8FF;
  --sted-tile-spotify: #D4F0C4;
  --sted-tile-product-hunt: #FFB89E;
  --sted-tile-web: #CFEFD9;
  --sted-tile-unknown: #FFE6A3;
  --sted-tile-ink: #141313;

  /* semantic — light */
  --sted-bg: var(--sted-white);
  --sted-bg-marketing: var(--sted-cream);
  --sted-surface: var(--sted-white);
  --sted-surface-subtle: var(--sted-subtle);
  --sted-surface-inverse: var(--sted-ink);
  --sted-text: var(--sted-ink);
  --sted-text-muted: var(--sted-text-secondary);
  --sted-text-inverse: var(--sted-cream);
  --sted-divider: var(--sted-border);
  --sted-accent: var(--sted-yellow);
  --sted-accent-text: var(--sted-ink);
  --sted-focus: var(--sted-ink);

  /* space */
  --sted-space-0: 0px;
  --sted-space-1: 2px;
  --sted-space-2: 4px;
  --sted-space-3: 8px;
  --sted-space-4: 12px;
  --sted-space-5: 16px;
  --sted-space-6: 20px;
  --sted-space-7: 24px;
  --sted-space-8: 32px;
  --sted-space-9: 40px;
  --sted-space-10: 48px;
  --sted-space-11: 64px;
  --sted-space-12: 80px;
  --sted-space-13: 96px;
  --sted-space-14: 128px;

  /* radius */
  --sted-radius-xs: 6px;
  --sted-radius-sm: 8px;
  --sted-radius-md: 12px;
  --sted-radius-lg: 16px;
  --sted-radius-xl: 20px;
  --sted-radius-2xl: 24px;
  --sted-radius-3xl: 32px;
  --sted-radius-pill: 999px;

  /* shadow + border */
  --sted-shadow-subtle: 0 1px 2px rgba(20, 19, 19, 0.04), 0 8px 24px rgba(20, 19, 19, 0.06);
  --sted-shadow-card: 0 2px 4px rgba(20, 19, 19, 0.04), 0 12px 28px rgba(20, 19, 19, 0.08);
  --sted-shadow-floating: 0 8px 18px rgba(20, 19, 19, 0.12);
  --sted-shadow-social-card: 0 10px 22px rgba(20, 19, 19, 0.07);
  --sted-shadow-outline: 0 0 0 1px rgba(20, 19, 19, 0.12);
  --sted-border-hairline: 1px;
  --sted-border-regular: 2px;
  --sted-border-social: 3px;

  /* layout */
  --sted-content-max: 1200px;
  --sted-reading-max: 680px;
  --sted-grid-columns: 12;
  --sted-grid-gutter: 24px;
  --sted-grid-margin: 20px;

  /* type */
  --sted-font-sans: Inter, -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  --sted-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --sted-weight-regular: 400;
  --sted-weight-medium: 500;
  --sted-weight-semibold: 600;
  --sted-weight-bold: 700;
  --sted-tracking-display: -0.05em;
  --sted-tracking-heading: -0.03em;
  --sted-tracking-label: 0.08em;
  --sted-leading-display: 0.96;
  --sted-leading-heading: 1.05;
  --sted-leading-body: 1.45;

  /* web type scale (fluid between mobile and desktop values) */
  --sted-text-display: clamp(52px, 4vw + 36px, 88px);
  --sted-text-h1: clamp(44px, 2.5vw + 32px, 64px);
  --sted-text-h2: clamp(36px, 1.5vw + 28px, 48px);
  --sted-text-h3: clamp(24px, 0.5vw + 22px, 28px);
  --sted-text-body-lg: clamp(18px, 0.25vw + 17px, 20px);
  --sted-text-body: 16px;
  --sted-text-label: 13px;
  --sted-text-meta: 12px;

  /* social type scale (px on a 1080 canvas) */
  --sted-social-display: 120px;
  --sted-social-title: 84px;
  --sted-social-title-sm: 64px;
  --sted-social-subtitle: 44px;
  --sted-social-body: 32px;
  --sted-social-body-sm: 26px;
  --sted-social-label: 22px;
  --sted-social-meta: 20px;
  --sted-social-safe: 72px;
  --sted-social-story-safe-y: 250px;

  /* motion */
  --sted-duration-fast: 120ms;
  --sted-duration-base: 200ms;
  --sted-duration-slow: 320ms;
  --sted-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --sted-ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --sted-ease-exit: cubic-bezier(0.4, 0, 1, 1);
}

@media (min-width: 768px) { :root { --sted-grid-margin: 32px; } }
@media (min-width: 1024px) { :root { --sted-grid-margin: 48px; } }

/* dark theme: semantic tokens only, brand colours stay the same */
[data-theme="dark"] {
  --sted-bg: var(--sted-dark-bg);
  --sted-bg-marketing: var(--sted-dark-bg);
  --sted-surface: var(--sted-dark-surface);
  --sted-surface-subtle: var(--sted-dark-subtle);
  --sted-surface-inverse: var(--sted-cream);
  --sted-text: var(--sted-dark-text);
  --sted-text-muted: var(--sted-dark-text-secondary);
  --sted-text-inverse: var(--sted-ink);
  --sted-divider: var(--sted-dark-border);
  --sted-focus: var(--sted-yellow);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sted-bg: var(--sted-dark-bg);
    --sted-bg-marketing: var(--sted-dark-bg);
    --sted-surface: var(--sted-dark-surface);
    --sted-surface-subtle: var(--sted-dark-subtle);
    --sted-surface-inverse: var(--sted-cream);
    --sted-text: var(--sted-dark-text);
    --sted-text-muted: var(--sted-dark-text-secondary);
    --sted-text-inverse: var(--sted-ink);
    --sted-divider: var(--sted-dark-border);
    --sted-focus: var(--sted-yellow);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --sted-duration-fast: 0ms; --sted-duration-base: 0ms; --sted-duration-slow: 0ms; }
}