/**
 * hindityping.ai - Grammarly Teal Design System Tokens
 * Location: /assets/css/theme.css
 */
:root {
  /* Colors */
  --color-grammarly-teal: #027e6f;
  --color-teal-hover: #02665a;
  --color-teal-active: #014f46;
  --color-teal-light: #e6f2f0;
  --color-teal-glow: rgba(2, 126, 111, 0.15);

  --color-midnight-navy: #1f243c;
  --color-ink-black: #0e101a;
  --color-graphite: #545454;
  --color-steel: #707070;
  --color-silver: #b7b7b7;
  --color-ash: #d9d9d9;
  --color-fog: #ebebeb;
  --color-cloud: #f5f5f5;
  --color-carbon: #1c1c1c;
  --color-slate: #4d536e;
  --color-paper: #ffffff;

  /* Functional Status Colors */
  --color-success: #027e6f;
  --color-success-bg: #e6f7f4;
  --color-success-border: #a3e0d8;
  --color-danger: #d32f2f;
  --color-danger-bg: #fde8e8;
  --color-danger-border: #f8b4b4;
  --color-warning: #b76e00;
  --color-warning-bg: #fef3c7;
  --color-warning-border: #fde68a;
  --color-info: #0284c7;
  --color-info-bg: #e0f2fe;
  --color-info-border: #bae6fd;

  /* Typography Stacks */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-hindi: 'Mangal', 'Nirmala UI', 'Noto Sans Devanagari', -apple-system, sans-serif;
  --font-kruti: 'Kruti Dev 010', 'DevLys 010', monospace;

  /* Type Scale */
  --text-caption: 12px;
  --leading-caption: 1.45;
  --text-body-sm: 14px;
  --leading-body-sm: 1.45;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-subheading: 20px;
  --leading-subheading: 1.25;
  --text-heading-sm: 22px;
  --leading-heading-sm: 1.2;
  --text-heading: 32px;
  --leading-heading: 1.15;
  --tracking-heading: -0.36px;
  --text-heading-lg: 42px;
  --leading-heading-lg: 1.11;
  --tracking-heading-lg: -0.46px;
  --text-display: 50px;
  --leading-display: 1.09;
  --tracking-display: -0.52px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;

  /* Borders & Radius */
  --border-hairline: 1px solid var(--color-fog);
  --border-subtle: 1px solid var(--color-ash);
  --border-teal: 1px solid var(--color-grammarly-teal);
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* Restrained Shadows (Near-flat editorial desk aesthetic) */
  --shadow-sm: 0 1px 2px rgba(14, 16, 26, 0.04);
  --shadow-md: 0 4px 12px rgba(14, 16, 26, 0.06);
  --shadow-lg: 0 10px 25px rgba(14, 16, 26, 0.08);
  --shadow-dropdown: 0 12px 30px rgba(14, 16, 26, 0.12);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 220ms cubic-bezier(0.16, 1, 0.3, 1);
}