/**
 * protrion-variables.css
 * Protrion Design System — CSS Custom Properties
 *
 * All design tokens expressed as CSS custom properties.
 * Import this file before any other Protrion stylesheet.
 *
 * Usage:
 *   <link rel="stylesheet" href="/css/protrion-variables.css">
 *
 * Then apply themes:
 *   <link rel="stylesheet" href="/css/protrion-dark.css">
 *   <link rel="stylesheet" href="/css/protrion-light.css">
 *
 * Source tokens: tokens/colors.json, tokens/typography.json, tokens/spacing.json
 * Version: 1.0.0
 */

/* ??? Brand Color Palette ????????????????????????????????????????????????? */

:root {
  --color-brand-black:      #100F13; /* PANTONE P 179-16 C */
  --color-brand-orange:     #FF2E00; /* PANTONE 172 C */
  --color-brand-orange-hover: #CC2500;
  --color-brand-light-grey: #F0F1F3;
  --color-brand-white:      #FFFFFF;
}

/* ??? Neutral Scale ??????????????????????????????????????????????????????? */

:root {
  --color-neutral-100: #DFE0E5;
  --color-neutral-200: #CCCFD6;
  --color-neutral-300: #B8BBC5;
  --color-neutral-400: #9196A1;
  --color-neutral-500: #797C86;
  --color-neutral-600: #61636B;
  --color-neutral-700: #484A51;
  --color-neutral-800: #303236;
  --color-neutral-900: #242528;
}

/* ??? Typography ?????????????????????????????????????????????????????????? */

:root {
  --font-body:    Manrope, system-ui, -apple-system, sans-serif;
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* Font weights */
  --font-weight-light:     300;
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

  /* Display scale (Space Grotesk) */
  --text-display-hero: 6rem;    /* 96px */
  --text-display-xl:   4.5rem;  /* 72px */
  --text-display-lg:   3rem;    /* 48px */
  --text-display-md:   1.5rem;  /* 24px */
  --text-display-sm:   0.75rem; /* 12px */

  /* Body scale (Manrope) */
  --text-body-xl: 1.25rem;   /* 20px */
  --text-body-lg: 1.125rem;  /* 18px */
  --text-body-md: 1rem;      /* 16px */
  --text-body-sm: 0.875rem;  /* 14px */
  --text-body-xs: 0.75rem;   /* 12px */

  /* Line heights */
  --line-height-display-hero: 1.05;
  --line-height-display-xl:   1.1;
  --line-height-display-lg:   1.15;
  --line-height-display-md:   1.3;
  --line-height-body:         1.6;
  --line-height-body-sm:      1.5;
  --line-height-body-xs:      1.4;

  /* Letter spacing */
  --letter-spacing-display: -0.02em;
  --letter-spacing-body:     0em;
  --letter-spacing-label:    0.04em;
}

/* ??? Spacing Scale (4px base grid) ?????????????????????????????????????? */

:root {
  --space-0:  0px;
  --space-px: 1px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
}

/* ??? Border Radius ??????????????????????????????????????????????????????? */

:root {
  --radius-none: 0px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;
}

/* ??? Border Width ???????????????????????????????????????????????????????? */

:root {
  --border-width-default: 1px;
  --border-width-thick:   2px;
}

/* ??? Elevation Shadows ??????????????????????????????????????????????????? */

:root {
  --shadow-sm: 0 1px 3px 0 rgba(16, 15, 19, 0.3),
               0 1px 2px -1px rgba(16, 15, 19, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(16, 15, 19, 0.4),
               0 2px 4px -2px rgba(16, 15, 19, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(16, 15, 19, 0.5),
               0 4px 6px -4px rgba(16, 15, 19, 0.5);
  --shadow-xl: 0 20px 25px -5px rgba(16, 15, 19, 0.6),
               0 8px 10px -6px rgba(16, 15, 19, 0.6);
}

/* ??? Layout ?????????????????????????????????????????????????????????????? */

:root {
  --layout-content-max-width: 1280px;
  --layout-sidebar-width:     256px;
  --layout-header-height:     64px;
  --layout-gutter-desktop:    24px;
  --layout-gutter-tablet:     20px;
  --layout-gutter-mobile:     16px;
  --layout-margin-desktop:    80px;
  --layout-margin-mobile:     16px;
}

/* ??? Motion / Transition Tokens ?????????????????????????????????????????????????????? */

:root {
  /* Duration scale */
  --duration-instant:  0ms;
  --duration-fast:     100ms;
  --duration-default:  200ms;
  --duration-slow:     300ms;
  --duration-slower:   500ms;

  /* Easing curves */
  --ease-linear:       linear;
  --ease-in:           cubic-bezier(0.4, 0, 1, 1);
  --ease-out:          cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Pre-composed transition shorthands */
  --transition-instant:   0ms var(--ease-out);
  --transition-fast:      var(--duration-fast) var(--ease-out);
  --transition-base:      var(--duration-default) var(--ease-out);
  --transition-slow:      var(--duration-slow) var(--ease-out);
  --transition-colors:    color var(--duration-default) var(--ease-out),
                          background-color var(--duration-default) var(--ease-out),
                          border-color var(--duration-default) var(--ease-out);
  --transition-shadow:    box-shadow var(--duration-default) var(--ease-out);
  --transition-transform: transform var(--duration-default) var(--ease-out);
}

/* Respect system reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ??? Z-Index Scale ??????????????????????????????????????????????????????? */

:root {
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}