/* ============================================================
 * 29 COURT UI TOKENS v1.0.0
 * The shared design language for every 29 Court surface.
 * Visual brief: bencho.dev meets Element UI v2 meets Hermosa
 * Beach meets Animal Crossing. Dev-tool crispness, component
 * discipline, beach-pastel warmth, playful chunky friendliness.
 *
 * Live: https://ideas.29court.com/ui/tokens.css
 * One-line include:
 *   <link rel="stylesheet" href="https://ideas.29court.com/ui/tokens.css">
 *
 * RULES
 * 1. Use these tokens for every color, radius, space, shadow,
 *    font, and motion value. No hardcoded hexes, no magic px.
 * 2. Theme overrides go on the :root re-declaration, never by
 *    redefining a token inline.
 * 3. If a value you need is missing, add a token here (and bump
 *    the version) instead of inlining a literal.
 * ============================================================ */

:root {
  /* ---------- COLOR: brand (Element UI v2 crispness) ---------- */
  --29c-color-primary: #409EFF;        /* primary actions, links, focus */
  --29c-color-primary-strong: #337ECC; /* hover / pressed */
  --29c-color-primary-soft: #ECF5FF;   /* tinted backgrounds */
  --29c-color-primary-line: #B3D8FF;   /* tinted borders */

  /* ---------- COLOR: warm neutrals (Hermosa, not corporate) ---------- */
  --29c-color-ink-950: #221F1A;       /* headings, strong text */
  --29c-color-ink-700: #4A443A;       /* body text */
  --29c-color-ink-500: #8A8175;       /* secondary / muted text */
  --29c-color-ink-300: #C9C2B6;       /* placeholder, disabled text */

  --29c-color-paper: #FFFDF8;          /* app surface */
  --29c-color-sand-100: #F7F2E8;      /* app background warmth */
  --29c-color-sand-200: #EFE7D6;      /* subtle fills */
  --29c-color-hairline: #E3DACA;      /* 1px borders and dividers */

  /* ---------- COLOR: Hermosa accents (sunset, golden hour, sea) ---------- */
  --29c-color-sunset: #FF7A45;        /* joyful highlights, CTA moments */
  --29c-color-sunset-soft: #FFEDE3;
  --29c-color-gold: #F5A623;          /* golden-hour accents */
  --29c-color-gold-soft: #FDF3DC;
  --29c-color-sea: #2EC4B6;           /* seafoam, success-adjacent pops */
  --29c-color-sea-soft: #DFF7F4;
  --29c-color-blush: #FFB3C1;         /* soft playful pink */
  --29c-color-blush-soft: #FDEAF0;

  /* ---------- COLOR: status (Element UI v2) ---------- */
  --29c-color-success: #67C23A;
  --29c-color-success-soft: #E8F6DF;
  --29c-color-success-deep: #3E7B1E;  /* text on success-soft */
  --29c-color-warning: #E6A23C;
  --29c-color-warning-soft: #FDF3DF;
  --29c-color-warning-deep: #9A6414;  /* text on warning-soft */
  --29c-color-danger: #F56C6C;
  --29c-color-danger-soft: #FDE8E8;
  --29c-color-danger-deep: #A93A3A;   /* text on danger-soft */
  --29c-color-info: #909399;
  --29c-color-info-soft: #F1F0EE;
  --29c-color-sea-deep: #14756B;      /* text on sea-soft */
  --29c-color-sunset-deep: #B34A1F;   /* text on sunset-soft */

  /* ---------- COLOR: on-color text (contrast-paired) ---------- */
  --29c-color-on-primary: #FFFFFF;
  --29c-color-on-dark: #FFFFFF;

  /* ---------- TYPE ---------- */
  --29c-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --29c-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo,
    "Cascadia Code", Consolas, monospace;

  --29c-text-xs: 12px;
  --29c-text-sm: 13px;
  --29c-text-base: 15px;
  --29c-text-lg: 17px;
  --29c-text-xl: 20px;
  --29c-text-2xl: 26px;
  --29c-text-3xl: 34px;

  --29c-weight-regular: 400;
  --29c-weight-medium: 500;
  --29c-weight-semibold: 600;
  --29c-weight-bold: 700;

  --29c-leading-tight: 1.25;
  --29c-leading-normal: 1.5;
  --29c-leading-loose: 1.7;

  /* ---------- RADIUS (Animal Crossing: chunky and friendly) ---------- */
  --29c-radius-sm: 8px;
  --29c-radius-md: 12px;
  --29c-radius-lg: 18px;
  --29c-radius-xl: 28px;
  --29c-radius-pill: 999px;

  /* ---------- SPACE (4pt scale) ---------- */
  --29c-space-1: 4px;
  --29c-space-2: 8px;
  --29c-space-3: 12px;
  --29c-space-4: 16px;
  --29c-space-6: 24px;
  --29c-space-8: 32px;
  --29c-space-12: 48px;
  --29c-space-16: 64px;

  /* ---------- SHADOW (soft, warm, never harsh) ---------- */
  --29c-shadow-card: 0 2px 16px rgba(74, 60, 36, 0.08);
  --29c-shadow-pop: 0 6px 28px rgba(74, 60, 36, 0.14);
  --29c-shadow-float: 0 12px 44px rgba(74, 60, 36, 0.18);

  /* ---------- MOTION (snappy, playful, never sluggish) ---------- */
  --29c-motion-fast: 120ms;
  --29c-motion-base: 200ms;
  --29c-motion-slow: 340ms;
  --29c-motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --29c-motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- COMPONENT DEFAULTS (derived, do not override) ---------- */
  --29c-control-height: 44px;
  --29c-control-height-sm: 36px;
  --29c-input-border: var(--29c-color-hairline);
  --29c-input-border-focus: var(--29c-color-primary);
  --29c-ring: 0 0 0 3px rgba(64, 158, 255, 0.25);
}