/* ============================================
   ATO COLOR TOKENS
   Primary: Orange #FF6100
   Neutrals: Black → White
   ============================================ */

:root {
  /* --- Orange Scale --- */
  --color-orange-50:  #FFF2E8;
  --color-orange-100: #FFD9BC;
  --color-orange-200: #FFB37F;
  --color-orange-300: #FF8840;
  --color-orange-400: #FF6100;   /* ← Brand primary */
  --color-orange-500: #E55700;
  --color-orange-600: #BF4900;
  --color-orange-700: #8F3700;
  --color-orange-800: #5C2300;
  --color-orange-900: #2E1200;

  /* --- Neutral Scale --- */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #F7F7F7;
  --color-neutral-100: #EFEFEF;
  --color-neutral-150: #E5E5E5;
  --color-neutral-200: #D8D8D8;
  --color-neutral-300: #B8B8B8;
  --color-neutral-400: #959595;
  --color-neutral-500: #717171;
  --color-neutral-600: #525252;
  --color-neutral-700: #363636;
  --color-neutral-800: #1E1E1E;
  --color-neutral-850: #141414;
  --color-neutral-900: #0A0A0A;   /* ← Brand black */

  /* --- Semantic: Foreground --- */
  --color-fg:           var(--color-neutral-900);
  --color-fg-muted:     var(--color-neutral-500);
  --color-fg-subtle:    var(--color-neutral-300);
  --color-fg-inverse:   var(--color-neutral-0);
  --color-fg-brand:     var(--color-orange-400);
  --color-fg-on-brand:  var(--color-neutral-900);  /* text ON orange bg */

  /* --- Semantic: Background --- */
  --color-bg:            var(--color-neutral-0);
  --color-bg-muted:      var(--color-neutral-50);
  --color-bg-subtle:     var(--color-neutral-100);
  --color-bg-dark:       var(--color-neutral-900);
  --color-bg-dark-2:     var(--color-neutral-800);
  --color-bg-brand:      var(--color-orange-400);
  --color-bg-brand-muted:var(--color-orange-50);

  /* --- Semantic: Border --- */
  --color-border:        var(--color-neutral-150);
  --color-border-muted:  var(--color-neutral-100);
  --color-border-dark:   var(--color-neutral-700);
  --color-border-brand:  var(--color-orange-400);

  /* --- Status --- */
  --color-success:       #1C7C4A;
  --color-success-light: #D1FAE5;
  --color-warning:       #D97706;
  --color-warning-light: #FEF3C7;
  --color-error:         #DC2626;
  --color-error-light:   #FEE2E2;
}
/* ============================================
   ATO TYPOGRAPHY TOKENS
   Display: Unbounded (Google Fonts)
   Body/UI: Satoshi (Fontshare)
   ============================================ */

:root {
  /* --- Font Families --- */
  --font-display: 'Unbounded', 'Impact', sans-serif;
  --font-body:    'Satoshi', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* --- Font Size Scale --- */
  --text-2xs:  0.625rem;   /* 10px */
  --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.65;
  --leading-loose:   1.8;

  /* --- Font Weights --- */
  --font-light:     300;
  --font-regular:   400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;
  --font-black:     900;

  /* --- Letter Spacing --- */
  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.03em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.15em;

  /* --- Semantic Type Roles --- */
  --type-display-font:    var(--font-display);
  --type-display-weight:  var(--font-extrabold);
  --type-display-leading: var(--leading-tight);
  --type-display-tracking:var(--tracking-tight);

  --type-heading-font:    var(--font-display);
  --type-heading-weight:  var(--font-bold);
  --type-heading-leading: var(--leading-snug);

  --type-body-font:    var(--font-body);
  --type-body-weight:  var(--font-regular);
  --type-body-leading: var(--leading-relaxed);

  --type-ui-font:    var(--font-body);
  --type-ui-weight:  var(--font-medium);
  --type-ui-leading: var(--leading-normal);

  --type-label-font:     var(--font-body);
  --type-label-weight:   var(--font-bold);
  --type-label-tracking: var(--tracking-widest);
  --type-label-transform:uppercase;
}
/* ============================================
   ATO SPACING, RADIUS & SHADOW TOKENS
   ============================================ */

:root {
  /* --- Spacing Scale (4px base) --- */
  --space-0:   0;
  --space-px:  1px;
  --space-0-5: 0.125rem;  /*  2px */
  --space-1:   0.25rem;   /*  4px */
  --space-1-5: 0.375rem;  /*  6px */
  --space-2:   0.5rem;    /*  8px */
  --space-2-5: 0.625rem;  /* 10px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-7:   1.75rem;   /* 28px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-14:  3.5rem;    /* 56px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-28:  7rem;      /* 112px */
  --space-32:  8rem;      /* 128px */
  --space-40:  10rem;     /* 160px */
  --space-48:  12rem;     /* 192px */

  /* --- Semantic Spacing --- */
  --space-page-x:     clamp(1.25rem, 5vw, 5rem);   /* horizontal page margin */
  --space-section-y:  clamp(4rem, 8vw, 8rem);       /* section vertical padding */
  --space-block-gap:  var(--space-8);               /* gap between content blocks */
  --space-component:  var(--space-6);               /* within-component padding */
  --space-tight:      var(--space-4);               /* tight component padding */
  --space-inset-sm:   var(--space-3) var(--space-4);
  --space-inset-md:   var(--space-4) var(--space-6);
  --space-inset-lg:   var(--space-6) var(--space-8);

  /* --- Border Radius --- */
  --radius-none: 0px;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* --- Border Width --- */
  --border-thin:   1px;
  --border-medium: 2px;
  --border-thick:  3px;

  /* --- Shadows --- */
  --shadow-xs:  0 1px 2px 0 rgba(0,0,0,0.06);
  --shadow-sm:  0 2px 4px 0 rgba(0,0,0,0.08);
  --shadow-md:  0 4px 12px 0 rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 24px 0 rgba(0,0,0,0.12);
  --shadow-xl:  0 16px 40px 0 rgba(0,0,0,0.14);
  --shadow-brand: 0 4px 16px 0 rgba(255,97,0,0.30);

  /* --- Z-Index --- */
  --z-base:    0;   /* @kind other */
  --z-above:   10;  /* @kind other */
  --z-overlay: 100; /* @kind other */
  --z-modal:   200; /* @kind other */
  --z-toast:   300; /* @kind other */
  --z-top:     400; /* @kind other */
}
/* ============================================
   ATO ANIMATION TOKENS
   Minimal, purposeful, fast.
   No bounce or spring — clean ease-out.
   ============================================ */

:root {
  /* --- Easing --- */
  --ease-default:   cubic-bezier(0.25, 0.46, 0.45, 0.94); /* @kind other */
  --ease-in:        cubic-bezier(0.55, 0.00, 1.00, 0.45); /* @kind other */
  --ease-out:       cubic-bezier(0.00, 0.00, 0.40, 1.00); /* @kind other */
  --ease-in-out:    cubic-bezier(0.45, 0.00, 0.55, 1.00); /* @kind other */
  --ease-sharp:     cubic-bezier(0.40, 0.00, 0.60, 1.00); /* @kind other */
  --ease-snappy:    cubic-bezier(0.16, 1, 0.3, 1);        /* @kind other */

  /* --- Duration --- */
  --duration-instant: 50ms;  /* @kind other */
  --duration-fast:    120ms; /* @kind other */
  --duration-normal:  220ms; /* @kind other */
  --duration-slow:    380ms; /* @kind other */
  --duration-slower:  550ms; /* @kind other */

  /* --- Shorthand transitions --- */
  --transition-base:       all var(--duration-normal) var(--ease-default);       /* @kind other */
  --transition-colors:     color var(--duration-fast) var(--ease-default),
                           background-color var(--duration-fast) var(--ease-default),
                           border-color var(--duration-fast) var(--ease-default); /* @kind other */
  --transition-transform:  transform var(--duration-normal) var(--ease-snappy);  /* @kind other */
  --transition-opacity:    opacity var(--duration-normal) var(--ease-default);   /* @kind other */
  --transition-shadow:     box-shadow var(--duration-normal) var(--ease-default);/* @kind other */
}