/* ============================================================
   SHIFT10 DESIGN SYSTEM — CSS Custom Properties
   Pure black & white, modern, AI-inspired
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&display=swap');

/* ---- ASPEKTA — Brand display & body font (variable weight 50–1000) ---- */
@font-face { font-family: 'Aspekta'; font-weight: 50;   font-style: normal; src: url('fonts/Aspekta-50.ttf')   format('truetype'); font-display: swap; }
@font-face { font-family: 'Aspekta'; font-weight: 100;  font-style: normal; src: url('fonts/Aspekta-100.ttf')  format('truetype'); font-display: swap; }
@font-face { font-family: 'Aspekta'; font-weight: 150;  font-style: normal; src: url('fonts/Aspekta-150.ttf')  format('truetype'); font-display: swap; }
@font-face { font-family: 'Aspekta'; font-weight: 200;  font-style: normal; src: url('fonts/Aspekta-200.ttf')  format('truetype'); font-display: swap; }
@font-face { font-family: 'Aspekta'; font-weight: 250;  font-style: normal; src: url('fonts/Aspekta-250.ttf')  format('truetype'); font-display: swap; }
@font-face { font-family: 'Aspekta'; font-weight: 300;  font-style: normal; src: url('fonts/Aspekta-300.ttf')  format('truetype'); font-display: swap; }
@font-face { font-family: 'Aspekta'; font-weight: 350;  font-style: normal; src: url('fonts/Aspekta-350.ttf')  format('truetype'); font-display: swap; }
@font-face { font-family: 'Aspekta'; font-weight: 400;  font-style: normal; src: url('fonts/Aspekta-400.ttf')  format('truetype'); font-display: swap; }
@font-face { font-family: 'Aspekta'; font-weight: 450;  font-style: normal; src: url('fonts/Aspekta-450.ttf')  format('truetype'); font-display: swap; }
@font-face { font-family: 'Aspekta'; font-weight: 500;  font-style: normal; src: url('fonts/Aspekta-500.ttf')  format('truetype'); font-display: swap; }
@font-face { font-family: 'Aspekta'; font-weight: 550;  font-style: normal; src: url('fonts/Aspekta-550.ttf')  format('truetype'); font-display: swap; }
@font-face { font-family: 'Aspekta'; font-weight: 600;  font-style: normal; src: url('fonts/Aspekta-600.ttf')  format('truetype'); font-display: swap; }
@font-face { font-family: 'Aspekta'; font-weight: 650;  font-style: normal; src: url('fonts/Aspekta-650.ttf')  format('truetype'); font-display: swap; }
@font-face { font-family: 'Aspekta'; font-weight: 700;  font-style: normal; src: url('fonts/Aspekta-700.ttf')  format('truetype'); font-display: swap; }
@font-face { font-family: 'Aspekta'; font-weight: 750;  font-style: normal; src: url('fonts/Aspekta-750.ttf')  format('truetype'); font-display: swap; }
@font-face { font-family: 'Aspekta'; font-weight: 800;  font-style: normal; src: url('fonts/Aspekta-800.ttf')  format('truetype'); font-display: swap; }
@font-face { font-family: 'Aspekta'; font-weight: 850;  font-style: normal; src: url('fonts/Aspekta-850.ttf')  format('truetype'); font-display: swap; }
@font-face { font-family: 'Aspekta'; font-weight: 900;  font-style: normal; src: url('fonts/Aspekta-900.ttf')  format('truetype'); font-display: swap; }
@font-face { font-family: 'Aspekta'; font-weight: 950;  font-style: normal; src: url('fonts/Aspekta-950.ttf')  format('truetype'); font-display: swap; }
@font-face { font-family: 'Aspekta'; font-weight: 1000; font-style: normal; src: url('fonts/Aspekta-1000.ttf') format('truetype'); font-display: swap; }

/* ---- BASE COLOR SCALE ---- */
:root {
  --color-black:      #000000;
  --color-white:      #FFFFFF;

  /* Neutral scale — light to dark */
  --color-neutral-50:  #F9F9F9;
  --color-neutral-100: #F2F2F2;
  --color-neutral-200: #E5E5E5;
  --color-neutral-300: #D0D0D0;
  --color-neutral-400: #A0A0A0;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #3D3D3D;
  --color-neutral-800: #262626;
  --color-neutral-900: #141414;
  --color-neutral-950: #0A0A0A;

  /* Accent — Shift10 orange */
  --color-accent:        #FF4D00;
  --color-accent-hover:  #E64500;
  --color-accent-active: #CC3D00;
  --color-accent-tint:   #FFE4D6;
  --color-accent-soft:   #FFD4BD;
}

/* ---- SEMANTIC TOKENS — LIGHT MODE (default) ---- */
:root {
  /* Backgrounds */
  --bg-primary:        var(--color-white);
  --bg-secondary:      var(--color-neutral-50);
  --bg-tertiary:       var(--color-neutral-100);
  --bg-inverse:        var(--color-black);
  --bg-overlay:        rgba(0, 0, 0, 0.85);

  /* Foregrounds */
  --fg-primary:        var(--color-black);
  --fg-secondary:      var(--color-neutral-600);
  --fg-tertiary:       var(--color-neutral-400);
  --fg-placeholder:    var(--color-neutral-300);
  --fg-inverse:        var(--color-white);
  --fg-on-inverse:     var(--color-white);

  /* Borders */
  --border-subtle:     var(--color-neutral-100);
  --border-default:    var(--color-neutral-200);
  --border-strong:     var(--color-neutral-400);
  --border-inverse:    var(--color-neutral-800);

  /* Interactive */
  --interactive-bg:        var(--color-accent);
  --interactive-fg:        var(--color-white);
  --interactive-bg-hover:  var(--color-accent-hover);
  --interactive-bg-ghost:  transparent;
  --interactive-border:    var(--color-accent);

  /* Accent semantic */
  --accent:               var(--color-accent);
  --accent-fg:            var(--color-white);
  --accent-tint-bg:       var(--color-accent-tint);
  --accent-tint-fg:       var(--color-accent);

  /* Surface (cards, panels) */
  --surface-default:   var(--color-white);
  --surface-raised:    var(--color-white);
  --surface-sunken:    var(--color-neutral-50);

  /* Shadows */
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.05);
  --shadow-md:  0 2px 12px rgba(0,0,0,0.07);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.12);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.18);
}

/* ---- SEMANTIC TOKENS — DARK MODE ---- */
[data-theme="dark"], .dark {
  --bg-primary:        var(--color-black);
  --bg-secondary:      var(--color-neutral-950);
  --bg-tertiary:       var(--color-neutral-900);
  --bg-inverse:        var(--color-white);
  --bg-overlay:        rgba(0, 0, 0, 0.9);

  --fg-primary:        var(--color-white);
  --fg-secondary:      var(--color-neutral-400);
  --fg-tertiary:       var(--color-neutral-600);
  --fg-placeholder:    var(--color-neutral-700);
  --fg-inverse:        var(--color-black);
  --fg-on-inverse:     var(--color-black);

  --border-subtle:     var(--color-neutral-900);
  --border-default:    var(--color-neutral-800);
  --border-strong:     var(--color-neutral-600);
  --border-inverse:    var(--color-neutral-200);

  --interactive-bg:        var(--color-accent);
  --interactive-fg:        var(--color-white);
  --interactive-bg-hover:  var(--color-accent-hover);
  --interactive-bg-ghost:  transparent;
  --interactive-border:    var(--color-accent);

  --accent:               var(--color-accent);
  --accent-fg:            var(--color-white);
  --accent-tint-bg:       rgba(255, 77, 0, 0.18);
  --accent-tint-fg:       var(--color-accent);

  --surface-default:   var(--color-neutral-950);
  --surface-raised:    var(--color-neutral-900);
  --surface-sunken:    var(--color-black);

  --shadow-sm:  0 1px 4px rgba(0,0,0,0.4);
  --shadow-md:  0 2px 12px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.6);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.8);
}

/* ---- TYPOGRAPHY SCALE ---- */
:root {
  /* Font families */
  --font-display:  'Aspekta', sans-serif;
  --font-body:     'Aspekta', sans-serif;
  --font-mono:     'JetBrains Mono', monospace;

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

  /* Type scale — desktop */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */
  --text-7xl:  4.5rem;     /* 72px */
  --text-8xl:  6rem;       /* 96px */
  --text-9xl:  8rem;       /* 128px */

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* Letter spacing */
  --tracking-tight:   -0.04em;
  --tracking-snug:    -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.12em;
}

/* ---- SEMANTIC TYPE STYLES ---- */
:root {
  /* Display headings */
  --h1-font:    var(--font-display);
  --h1-size:    var(--text-7xl);
  --h1-weight:  var(--weight-semibold);
  --h1-leading: var(--leading-tight);
  --h1-tracking: var(--tracking-tight);

  --h2-font:    var(--font-display);
  --h2-size:    var(--text-5xl);
  --h2-weight:  var(--weight-semibold);
  --h2-leading: var(--leading-tight);
  --h2-tracking: var(--tracking-snug);

  --h3-font:    var(--font-display);
  --h3-size:    var(--text-3xl);
  --h3-weight:  var(--weight-medium);
  --h3-leading: var(--leading-snug);
  --h3-tracking: var(--tracking-snug);

  --h4-font:    var(--font-display);
  --h4-size:    var(--text-xl);
  --h4-weight:  var(--weight-medium);
  --h4-leading: var(--leading-snug);
  --h4-tracking: var(--tracking-normal);

  /* Body */
  --body-lg-font:    var(--font-body);
  --body-lg-size:    var(--text-lg);
  --body-lg-weight:  var(--weight-regular);
  --body-lg-leading: var(--leading-relaxed);

  --body-font:    var(--font-body);
  --body-size:    var(--text-base);
  --body-weight:  var(--weight-regular);
  --body-leading: var(--leading-normal);

  --body-sm-font:    var(--font-body);
  --body-sm-size:    var(--text-sm);
  --body-sm-weight:  var(--weight-regular);
  --body-sm-leading: var(--leading-normal);

  /* UI / Labels */
  --label-font:     var(--font-body);
  --label-size:     var(--text-xs);
  --label-weight:   var(--weight-medium);
  --label-tracking: var(--tracking-widest);
  --label-transform: uppercase;

  /* Mono */
  --mono-font:    var(--font-mono);
  --mono-size:    var(--text-sm);
  --mono-weight:  var(--weight-regular);
  --mono-leading: var(--leading-relaxed);
}

/* ---- SPACING SCALE ---- */
:root {
  --space-0:    0px;
  --space-px:   1px;
  --space-0-5:  2px;
  --space-1:    4px;
  --space-1-5:  6px;
  --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;
  --space-32:   128px;
  --space-40:   160px;
  --space-48:   192px;
  --space-64:   256px;
}

/* ---- BORDER RADIUS ---- */
:root {
  --radius-none:   0px;
  --radius-sm:     4px;
  --radius-md:     6px;
  --radius-lg:     8px;
  --radius-xl:     12px;
  --radius-2xl:    16px;
  --radius-full:   9999px;
}

/* ---- ANIMATION / MOTION ---- */
:root {
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out:   cubic-bezier(0.87, 0, 0.13, 1);
  --ease-linear:   linear;

  --duration-fast:    150ms;
  --duration-base:    250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;

  --transition-default: var(--duration-base) var(--ease-out);
  --transition-fast:    var(--duration-fast) var(--ease-out);
}

/* ---- LAYOUT ---- */
:root {
  --max-width:      1200px;
  --max-width-sm:   640px;
  --max-width-md:   768px;
  --max-width-lg:   1024px;
  --gutter:         24px;
  --section-py:     var(--space-24);
  --nav-height:     64px;
  --sidebar-width:  240px;
}

/* ---- BASE ELEMENT STYLES ---- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--fg-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1 {
  font-family: var(--h1-font);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  line-height: var(--h1-leading);
  letter-spacing: var(--h1-tracking);
  margin: 0;
}
h2 {
  font-family: var(--h2-font);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: var(--h2-leading);
  letter-spacing: var(--h2-tracking);
  margin: 0;
}
h3 {
  font-family: var(--h3-font);
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-leading);
  letter-spacing: var(--h3-tracking);
  margin: 0;
}
h4 {
  font-family: var(--h4-font);
  font-size: var(--h4-size);
  font-weight: var(--h4-weight);
  line-height: var(--h4-leading);
  letter-spacing: var(--h4-tracking);
  margin: 0;
}
p {
  font-family: var(--body-font);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  margin: 0;
}
code, pre, kbd {
  font-family: var(--font-mono);
  font-size: var(--mono-size);
}