/* public/CSS/variables.css */

/* Design tokens: light mode defaults, with manual and system dark-mode overrides. */

:root {
  color-scheme: light;

  /* Typography */
  --font-family-sans: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-family-heading: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-size-050: 0.875rem;
  --font-size-100: 1rem;
  --font-size-200: clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
  --font-size-300: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  --font-size-400: clamp(1.375rem, 1.18rem + 0.9vw, 1.875rem);
  --font-size-500: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --font-size-600: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);

  /* Layout */
  --size-reading: 65ch;
  --size-content: 72rem;
  --size-wide: 90rem;
  --nav-height: 4rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.12);

  /* Motion */
  --transition-fast: 160ms ease;
  --transition-base: 220ms ease;

  /* Core palette */
  --brand-600: #0f5a7a;
  --brand-700: #0b4962;
  --accent-600: #1d4ed8;
  --focus-600: #2563eb;
  --success-700: #166534;
  --danger-700: #b42318;
  --warning-700: #b54708;
  

  --main-white: #ffffff;
  --main-gray: #596770; 
  --main-blue: #84C0C6;
  --main-red: #49111C;
  --main-orange: #EB5E28;
  --main-yellow: #FAF2A1;
  --main-black: #000000;
  --test-grey: #343A3A;


  /* -50% colors */ 
  --main-gray-dark: #2C3337; 
  --main-blue-dark: #346C72;
  --main-red-dark: #25090E;
  --main-orange-dark: #7E2C0C;
  --main-yellow-dark: #C4B50A;

  /* -50% colors */ 
  --main-gray-light: #A9B3BA; 
  --main-blue-light: #C2E0E3;
  --main-red-light: #D75670;
  --main-orange-light: #F5AF94;
  --main-yellow-light: #FDF9D1;

  /* Semantic colors: light theme */
  --color-bg: #f8fafc;
  --color-bg-alt: #eef2f6;
  --color-surface: #ffffff;
  --color-surface-muted: #f1f5f9;
  --color-border: #d0d7de;
  --color-border-strong: #98a2b3;
  --color-text: #1f2937;
  --color-text-strong: #111827;
  --color-text-muted: #475467;
  --color-text-subtle: #667085;

  --color-link: var(--brand-600);
  --color-link-hover: var(--brand-700);

  --color-brand: var(--brand-600);
  --color-brand-hover: var(--brand-700);
  --color-brand-soft: #e0f2fe;
  --color-button-text: #ffffff;

  --color-accent: var(--accent-600);
  --color-focus: var(--focus-600);

  --color-success: var(--success-700);
  --color-success-bg: #ecfdf3;

  --color-danger: var(--danger-700);
  --color-danger-bg: #fef3f2;

  --color-warning: var(--warning-700);
  --color-warning-bg: #fffaeb;

  --color-code-bg: #111827;
  --color-code-text: #f8fafc;
}

/* Manual light override */
html[data-theme="light"] {
  color-scheme: light;
}

/* Manual dark override */
html[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #0b1220;
  --color-bg-alt: #111827;
  --color-surface: #111827;
  --color-surface-muted: #172033;
  --color-border: #334155;
  --color-border-strong: #64748b;
  --color-text: #e5e7eb;
  --color-text-strong: #f8fafc;
  --color-text-muted: #cbd5e1;
  --color-text-subtle: #94a3b8;

  --color-link: #93c5fd;
  --color-link-hover: #bfdbfe;

  --color-brand: #38bdf8;
  --color-brand-hover: #7dd3fc;
  --color-brand-soft: #0f172a;
  --color-button-text: #082032;

  --color-accent: #93c5fd;
  --color-focus: #93c5fd;

  --color-success: #4ade80;
  --color-success-bg: #052e16;

  --color-danger: #fda29b;
  --color-danger-bg: #55160c;

  --color-warning: #fbbf24;
  --color-warning-bg: #451a03;

  --color-code-bg: #020617;
  --color-code-text: #e2e8f0;
}

/* System dark mode when no manual light override is present */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg: #0b1220;
    --color-bg-alt: #111827;
    --color-surface: #111827;
    --color-surface-muted: #172033;
    --color-border: #334155;
    --color-border-strong: #64748b;
    --color-text: #e5e7eb;
    --color-text-strong: #f8fafc;
    --color-text-muted: #cbd5e1;
    --color-text-subtle: #94a3b8;

    --color-link: #93c5fd;
    --color-link-hover: #bfdbfe;

    --color-brand: #38bdf8;
    --color-brand-hover: #7dd3fc;
    --color-brand-soft: #0f172a;
    --color-button-text: #082032;

    --color-accent: #93c5fd;
    --color-focus: #93c5fd;

    --color-success: #4ade80;
    --color-success-bg: #052e16;

    --color-danger: #fda29b;
    --color-danger-bg: #55160c;

    --color-warning: #fbbf24;
    --color-warning-bg: #451a03;

    --color-code-bg: #020617;
    --color-code-text: #e2e8f0;
  }
}