/* RHT Design System — global tokens
 * Source: rht-design-system/project/tokens/*.css
 * Consumed by every page via nuxt.config.js -> css[].
 * Keep semantic aliases stable; components reference them by name.
 */
:root {
  /* ---- Neutrals — cool ink ramp ---- */
  --ink-950: #0A0E1A;
  --ink-900: #111726;
  --ink-800: #1B2333;
  --ink-700: #2A3344;
  --ink-600: #3D4859;
  --ink-500: #5A6678;
  --ink-400: #828D9E;
  --ink-300: #AEB7C4;
  --ink-200: #D4DAE3;
  --ink-100: #E8ECF2;
  --ink-50:  #F4F6FA;
  --white:   #FFFFFF;

  /* ---- Brand — electric cobalt ---- */
  --blue-800: #15268C;
  --blue-700: #1B3BD6;
  --blue-600: #2E5BFF;
  --blue-500: #5279FF;
  --blue-300: #A6BAFF;
  --blue-100: #E1E8FF;
  --blue-50:  #F0F4FF;

  /* ---- Accent — growth green ---- */
  --green-700: #0B7C4D;
  --green-600: #0FA968;
  --green-100: #D6F4E5;
  --green-50:  #ECFBF3;

  /* ---- Semantic hues ---- */
  --amber-600: #D98305;
  --amber-500: #F5A623;
  --amber-100: #FBEBCB;
  --red-700:   #C0353A;
  --red-600:   #E5484D;
  --red-100:   #FBDDDE;

  /* Text */
  --text-strong:  var(--ink-950);
  --text-body:    var(--ink-700);
  --text-muted:   var(--ink-500);
  --text-subtle:  var(--ink-400);
  --text-onbrand: var(--white);
  --text-link:    var(--blue-600);

  /* Surfaces */
  --surface-page:    var(--white);
  --surface-card:    var(--white);
  --surface-subtle:  var(--ink-50);
  --surface-sunken:  var(--ink-100);
  --surface-inverse: var(--ink-950);
  --surface-brand:   var(--blue-600);
  --surface-brand-subtle: var(--blue-50);
  --surface-accent-subtle: var(--green-50);

  /* Borders */
  --border-subtle:  var(--ink-100);
  --border-default: var(--ink-200);
  --border-strong:  var(--ink-300);
  --border-brand:   var(--blue-600);
  --border-inverse: var(--ink-800);

  /* Brand roles */
  --brand:          var(--blue-600);
  --brand-hover:    var(--blue-700);
  --brand-active:   var(--blue-800);
  --brand-subtle:   var(--blue-50);
  --on-brand:       var(--white);
  --accent:         var(--green-600);
  --accent-hover:   var(--green-700);

  /* Status */
  --success:    var(--green-600);
  --success-bg: var(--green-50);
  --warning:    var(--amber-500);
  --warning-bg: var(--amber-100);
  --danger:     var(--red-600);
  --danger-bg:  var(--red-100);
  --info:       var(--blue-600);
  --info-bg:    var(--blue-50);

  /* Focus */
  --focus-ring: var(--blue-500);

  /* ---- Typography ---- */
  --font-sans: 'IBM Plex Sans JP', 'IBM Plex Sans', system-ui, -apple-system, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
  --font-display: 'IBM Plex Sans JP', 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  1.875rem;
  --text-3xl:  2.375rem;
  --text-4xl:  3rem;
  --text-5xl:  4rem;
  --text-6xl:  5rem;

  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  --tracking-tighter: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.08em;

  /* ---- Spacing ---- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --container-sm:  640px;
  --container-md:  840px;
  --container-lg:  1080px;
  --container-xl:  1280px;
  --gutter:        var(--space-6);
  --section-y:     var(--space-24);

  /* ---- Effects ---- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;

  --border-thin:   1px;
  --border-medium: 1.5px;
  --border-thick:  2px;

  --shadow-xs: 0 1px 2px rgba(17, 23, 38, 0.06);
  --shadow-sm: 0 1px 3px rgba(17, 23, 38, 0.08), 0 1px 2px rgba(17, 23, 38, 0.04);
  --shadow-md: 0 4px 12px rgba(17, 23, 38, 0.08), 0 2px 4px rgba(17, 23, 38, 0.04);
  --shadow-lg: 0 12px 28px rgba(17, 23, 38, 0.12), 0 4px 8px rgba(17, 23, 38, 0.05);
  --shadow-xl: 0 24px 56px rgba(17, 23, 38, 0.16), 0 8px 16px rgba(17, 23, 38, 0.06);
  --shadow-brand: 0 8px 24px rgba(46, 91, 255, 0.28);
  --shadow-focus: 0 0 0 3px rgba(82, 121, 255, 0.35);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;

  --z-base: 1;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/* Inverse scope — dark sections of the marketing site */
.on-inverse {
  --text-strong:  var(--white);
  --text-body:    var(--ink-200);
  --text-muted:   var(--ink-400);
  --text-subtle:  var(--ink-500);
  --surface-card: var(--ink-900);
  --surface-subtle: var(--ink-800);
  --border-subtle:  var(--ink-800);
  --border-default: var(--ink-700);
}