/* ==========================================================================
   Scoretab India — Design Language tokens (single source of truth)
   Bloomberg-terminal discipline for sports scores. Load first.
   ========================================================================== */

:root {
  /* Warm neutral ramp — 13 stops */
  --ramp-0: #0f0e0d;
  --ramp-1: #151412;
  --ramp-2: #1a1816;
  --ramp-3: #1a1714;
  --ramp-4: #242220;
  --ramp-5: #3a3532;
  --ramp-6: #4a4540;
  --ramp-7: #5c5550;
  --ramp-8: #7a7570;
  --ramp-9: #9a9590;
  --ramp-10: #c8c0b8;
  --ramp-11: #f0ece8;
  --ramp-12: #f5f2ee;

  /* Surfaces (light) */
  --background: var(--ramp-12);
  --surface: #edeae5;
  --surface-soft: #f0ede9;
  --surface-strong: #eae7e2;
  --surface-card: var(--surface);
  --surface-divider: #dedad4;
  --surface-hover: #eae7e2;
  --border: var(--surface-divider);
  --border-color: var(--border);
  --hover: var(--surface-hover);

  /* Text luminance (light) */
  --text: var(--ramp-3);
  --text-primary: var(--ramp-3);
  --text-body: var(--ramp-6);
  --text-soft: var(--ramp-6);
  --text-muted: var(--ramp-9);
  --text-meta: var(--ramp-9);

  /* Accent — live state ONLY in components */
  --accent: #3d8b8b;
  --accent-soft: rgba(61, 139, 139, 0.08);
  --accent-alpha-15: rgba(61, 139, 139, 0.15);
  --accent-alpha-40: rgba(61, 139, 139, 0.4);
  --accent-dark: #1a3535;

  /* Functional */
  --danger: #d04040;
  --warning: #f0c040;

  /* Match score luminance (light): winner 100% / loser 55% / draw 75% */
  --match-full: #1a1714;
  --match-dim: #8a847c;   /* ~55% of primary on cream */
  --match-draw: #5c5854;  /* ~75% of primary on cream */
  --match-live: var(--accent);

  /* Typography */
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --font-sans: ui-rounded, 'SF Pro Rounded', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Type scale — 12 UI steps */
  --text-4xs: 7px;
  --text-3xs: 8px;
  --text-2xs: 9px;
  --text-xs: 10px;
  --text-sm: 11px;
  --text-md: 12px;
  --text-base: 13px;
  --text-lg: 14px;
  --text-xl: 15px;
  --text-2xl: 16px;
  --text-display-sm: 20px;
  --text-display-md: 24px;
  --text-display-lg: 32px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0.01em;
  --letter-spacing-wide: 0.02em;
  --line-height-tight: 1.15;
  --line-height-body: 1.45;

  /* Spacing — 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 40px;

  /* Interaction */
  --focus-ring: 0 0 0 3px var(--accent-alpha-15);
  --shadow-flat: 3px 3px 0 var(--ramp-3);
  --shadow-flat-sm: 2px 2px 0 var(--ramp-3);
  --shadow-flat-pressed: 1px 1px 0 var(--ramp-3);
  /* Soft elevation is NOT part of the design language — keep transparent for legacy refs */
  --shadow: none;

  /* Scrims */
  --scrim-soft: rgba(15, 14, 13, 0.04);
  --scrim-strong: rgba(15, 14, 13, 0.55);

  /* Touch */
  --touch-min: 44px;
  --touch-min-android: 48px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --background: var(--ramp-0);
  --surface: var(--ramp-1);
  --surface-soft: var(--ramp-2);
  --surface-strong: var(--ramp-0);
  --surface-card: var(--surface-strong);
  --surface-divider: var(--ramp-4);
  --surface-hover: var(--ramp-2);
  --border: var(--surface-divider);
  --border-color: var(--border);
  --hover: var(--surface-hover);

  --text: var(--ramp-11);
  --text-primary: var(--ramp-11);
  --text-body: var(--ramp-10);
  --text-soft: #a09890;
  --text-muted: #7a7672;
  --text-meta: #7a7672;

  --accent-soft: #1a3535;
  --accent-dark: var(--accent);

  --match-full: #f0ece8;
  --match-dim: #8a847c;   /* ~55% */
  --match-draw: #b8b0a8;  /* ~75% */
  --match-live: var(--accent);

  --shadow-flat: 3px 3px 0 var(--ramp-11);
  --shadow-flat-sm: 2px 2px 0 var(--ramp-11);
  --shadow-flat-pressed: 1px 1px 0 var(--ramp-11);
  --shadow: none;

  --scrim-soft: rgba(245, 242, 238, 0.04);
  --scrim-strong: rgba(0, 0, 0, 0.65);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --background: var(--ramp-0);
    --surface: var(--ramp-1);
    --surface-soft: var(--ramp-2);
    --surface-strong: var(--ramp-0);
    --surface-card: var(--surface-strong);
    --surface-divider: var(--ramp-4);
    --surface-hover: var(--ramp-2);
    --border: var(--surface-divider);
    --border-color: var(--border);
    --hover: var(--surface-hover);

    --text: var(--ramp-11);
    --text-primary: var(--ramp-11);
    --text-body: var(--ramp-10);
    --text-soft: #a09890;
    --text-muted: #7a7672;
    --text-meta: #7a7672;

    --accent-soft: #1a3535;
    --accent-dark: var(--accent);

    --match-full: #f0ece8;
    --match-dim: #8a847c;
    --match-draw: #b8b0a8;
    --match-live: var(--accent);

    --shadow-flat: 3px 3px 0 var(--ramp-11);
    --shadow-flat-sm: 2px 2px 0 var(--ramp-11);
    --shadow-flat-pressed: 1px 1px 0 var(--ramp-11);
    --shadow: none;

    --scrim-soft: rgba(245, 242, 238, 0.04);
    --scrim-strong: rgba(0, 0, 0, 0.65);
  }
}