/* On Behalf AI — design system dark (tokens inlinés, source : design system Claude Design) */

/* ==== ./tokens/fonts.css ==== */
/* ============================================================
   On Behalf AI — Web fonts
   Poppins is the real brand face (PPTX theme "On Behalf AI -
   Poppins"). IBM Plex Mono is an intentional addition for
   technical/code contexts. Served from Google Fonts here;
   self-host the .woff2 for production if offline use is needed.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ==== ./tokens/colors.css ==== */
/* ============================================================
   On Behalf AI — Color tokens
   Dark-first system built from the brand PPTX palette
   ("On Behalf AI" theme). Base values are the exact brand
   colors; semantic aliases map them onto a dark UI.
   ============================================================ */
:root{
  /* ---- Brand raw palette (exact, from PPTX theme) ---- */
  --brand-navy:      #1C244B; /* dk1  — core brand navy      */
  --brand-slate:     #44546A; /* dk2  — muted slate          */
  --brand-blue:      #2F5597; /* accent1 — primary blue      */
  --brand-blue-pale: #DAE5EF; /* accent2 — pale blue         */
  --brand-sky:       #5B9AD4; /* accent3 — sky blue          */
  --brand-orange:    #FB840D; /* accent4 — orange            */
  --brand-amber:     #FCA810; /* accent5 — amber             */
  --brand-gold:      #FEB501; /* accent6 — gold              */
  --brand-link:      #0563C1; /* hlink                       */
  --brand-paper:     #F3F5F8; /* lt2  — off-white            */
  --brand-white:     #FFFFFF; /* lt1                         */

  /* ---- Ink ramp: navy-tinted neutrals (deep bg → light text) ---- */
  --ink-1000:#05070F;
  --ink-950: #070A16;
  --ink-900: #0B1020;
  --ink-850: #0F142A;
  --ink-800: #141A33;
  --ink-750: #1A2242;
  --ink-700: #232C54;
  --ink-650: #2C3663;
  --ink-600: #384372;
  --ink-500: #4C5888;
  --ink-400: #6B77A0;
  --ink-350: #8590B5;
  --ink-300: #9AA4C4;
  --ink-200: #C3CADE;
  --ink-100: #E4E8F2;
  --ink-050: #F3F5F8;

  /* ---- Blue ramp (accent / primary), tuned for dark contrast ---- */
  --blue-800:#213c6b;
  --blue-700:#2F5597; /* brand */
  --blue-600:#396bb3;
  --blue-500:#4A82C8; /* primary action on dark */
  --blue-400:#5B9AD4; /* brand sky */
  --blue-300:#83B4E0;
  --blue-200:#B4D2EC;
  --blue-100:#DAE5EF; /* brand pale */

  /* ---- Warm "spark" ramp (the sparkle motif) ---- */
  --spark-700:#C7620A;
  --spark-600:#E0770B;
  --spark-500:#FB840D; /* brand orange */
  --spark-400:#FCA810; /* brand amber  */
  --spark-300:#FEB501; /* brand gold   */
  --spark-200:#FFCE5C;
  --spark-100:#FFE6AE;

  /* ---- Derived status colors (not in source — see readme) ---- */
  --green-500:#2FB98A;
  --green-400:#46D3A2;
  --red-500:  #E5555A;
  --red-400:  #F27A7E;

  /* ============================================================
     SEMANTIC ALIASES (dark theme) — reference these, not raw
     ============================================================ */
  /* Surfaces */
  --bg:              var(--ink-950);
  --bg-deep:         var(--ink-1000);
  --surface:         var(--ink-850);
  --surface-raised:  var(--ink-800);
  --surface-overlay: var(--ink-750);
  --surface-inset:   var(--ink-900);
  --surface-hover:   var(--ink-700);

  /* Text */
  --text:            var(--ink-050);
  --text-secondary:  var(--ink-300);
  --text-muted:      var(--ink-400);
  --text-faint:      var(--ink-500);
  --text-inverse:    var(--brand-navy);
  --text-on-accent:  var(--brand-white);
  --text-on-spark:   var(--brand-navy);

  /* Borders & lines */
  --border:          rgba(255,255,255,.10);
  --border-strong:   rgba(255,255,255,.16);
  --border-subtle:   rgba(255,255,255,.06);
  --border-accent:   color-mix(in oklab, var(--blue-400) 55%, transparent);

  /* Accent (primary = brand blue) */
  --accent:          var(--blue-500);
  --accent-hover:    var(--blue-400);
  --accent-press:    var(--blue-600);
  --accent-quiet:    color-mix(in oklab, var(--blue-500) 16%, transparent);
  --accent-text:     var(--blue-300);

  /* Spark (signature warm highlight — use sparingly) */
  --spark:           var(--spark-400);
  --spark-hover:     var(--spark-300);
  --spark-quiet:     color-mix(in oklab, var(--spark-400) 16%, transparent);
  --spark-text:      var(--spark-300);

  /* Links */
  --link:            var(--blue-300);
  --link-hover:      var(--blue-200);

  /* Status */
  --success:         var(--green-400);
  --success-quiet:   color-mix(in oklab, var(--green-500) 18%, transparent);
  --warning:         var(--spark-300);
  --warning-quiet:   var(--spark-quiet);
  --danger:          var(--red-500);
  --danger-quiet:    color-mix(in oklab, var(--red-500) 18%, transparent);
  --info:            var(--blue-400);
  --info-quiet:      var(--accent-quiet);

  /* Focus ring */
  --focus-ring:      color-mix(in oklab, var(--blue-400) 70%, transparent);

  /* Signature gradients */
  --grad-spark: linear-gradient(103deg, var(--spark-500) 0%, var(--spark-300) 100%);
  --grad-blue:  linear-gradient(103deg, var(--blue-600) 0%, var(--blue-400) 100%);
  --grad-aurora: linear-gradient(120deg, var(--blue-500) 0%, var(--blue-400) 45%, var(--spark-400) 115%);
  --grad-surface: linear-gradient(180deg, var(--ink-800) 0%, var(--ink-850) 100%);
  /* Radial glow used behind hero marks / the sparkle motif */
  --glow-spark: radial-gradient(60% 60% at 50% 40%, color-mix(in oklab, var(--spark-400) 40%, transparent) 0%, transparent 70%);
  --glow-blue:  radial-gradient(60% 60% at 50% 40%, color-mix(in oklab, var(--blue-400) 38%, transparent) 0%, transparent 70%);
}

/* Optional light scope — for surfaces that must stay on paper
   (print, embeds). Reuses the same brand palette. */
[data-theme="light"]{
  --bg:              var(--brand-paper);
  --bg-deep:         #E8ECF3;
  --surface:         var(--brand-white);
  --surface-raised:  var(--brand-white);
  --surface-overlay: var(--brand-white);
  --surface-inset:   #EDF1F7;
  --surface-hover:   #E8ECF3;
  --text:            var(--brand-navy);
  --text-secondary:  var(--brand-slate);
  --text-muted:      #6B7590;
  --text-faint:      #98A0B5;
  --text-on-accent:  var(--brand-white);
  --border:          rgba(28,36,75,.14);
  --border-strong:   rgba(28,36,75,.22);
  --border-subtle:   rgba(28,36,75,.08);
  --accent:          var(--brand-blue);
  --accent-hover:    var(--blue-600);
  --link:            var(--brand-link);
  --link-hover:      var(--brand-blue);
}

/* ==== ./tokens/typography.css ==== */
/* ============================================================
   On Behalf AI — Typography tokens
   Core brand face is Poppins (PPTX theme: "On Behalf AI - Poppins",
   Poppins Medium). IBM Plex Mono is an intentional addition for
   technical / code labels (see readme → Intentional additions).
   ============================================================ */
:root{
  /* Families */
  --font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace;

  /* Weights (Poppins ships 300–700; brand default is Medium/500) */
  --fw-light: 300;      /* @kind font */
  --fw-regular: 400;    /* @kind font */
  --fw-medium: 500;     /* @kind font */
  --fw-semibold: 600;   /* @kind font */
  --fw-bold: 700;       /* @kind font */

  /* Type scale — 1.25 major-third-ish, tuned */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.25rem;   /* 20 */
  --text-2xl:  1.5rem;    /* 24 */
  --text-3xl:  1.875rem;  /* 30 */
  --text-4xl:  2.375rem;  /* 38 */
  --text-5xl:  3rem;      /* 48 */
  --text-6xl:  3.75rem;   /* 60 */
  --text-7xl:  4.75rem;   /* 76 */
  /* Fluid display sizes for hero / marketing */
  --display-lg: clamp(2.75rem, 1.5rem + 5vw, 5.25rem);   /* @kind other */
  --display-md: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem); /* @kind other */
  --display-sm: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); /* @kind other */

  /* Line heights */
  --leading-none: 1;        /* @kind other */
  --leading-tight: 1.08;    /* @kind other */
  --leading-snug: 1.22;     /* @kind other */
  --leading-normal: 1.5;    /* @kind other */
  --leading-relaxed: 1.65;  /* @kind other */

  /* Letter spacing */
  --tracking-tighter: -0.03em; /* @kind other */
  --tracking-tight: -0.015em;  /* @kind other */
  --tracking-normal: 0;        /* @kind other */
  --tracking-wide: 0.02em;     /* @kind other */
  --tracking-eyebrow: 0.14em;  /* @kind other */

  /* Semantic roles */
  --font-body: var(--font-sans);
  --font-heading: var(--font-display);
  --font-code: var(--font-mono);
  --weight-body: var(--fw-regular);
  --weight-heading: var(--fw-semibold);
  --weight-strong: var(--fw-semibold);
}

/* ==== ./tokens/spacing.css ==== */
/* ============================================================
   On Behalf AI — Spacing, radius, borders, elevation, motion
   ============================================================ */
:root{
  /* Spacing scale (4px base) */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-20: 5rem;    /* 80 */
  --space-24: 6rem;    /* 96 */
  --space-32: 8rem;    /* 128 */

  /* Layout */
  --container: 1200px;                  /* @kind spacing */
  --container-wide: 1360px;             /* @kind spacing */
  --container-prose: 68ch;              /* @kind spacing */
  --gutter: clamp(1.25rem, 4vw, 4rem);  /* @kind spacing */
  --section-y: clamp(4rem, 9vw, 9rem);  /* @kind spacing */

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-3xl: 36px;
  --radius-pill: 999px;
  --radius-card: var(--radius-xl);

  /* Border widths */
  --border-w: 1px;         /* @kind spacing */
  --border-w-thick: 1.5px; /* @kind spacing */

  /* Elevation — layered black shadows for dark UI, plus a hairline
     top light to fake a lit edge. Accent glows are separate. */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 2px 6px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px -6px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
  --shadow-lg: 0 20px 48px -12px rgba(0,0,0,.6), 0 6px 16px rgba(0,0,0,.4);
  --shadow-xl: 0 40px 80px -20px rgba(0,0,0,.7), 0 10px 24px rgba(0,0,0,.45);
  --ring-inset-top: inset 0 1px 0 rgba(255,255,255,.06);

  /* Accent glows (for focus, hero marks, active nav) */
  --glow-accent-sm: 0 0 0 1px color-mix(in oklab, var(--blue-400) 40%, transparent), 0 6px 24px -6px color-mix(in oklab, var(--blue-500) 55%, transparent);
  --glow-spark-sm: 0 6px 28px -6px color-mix(in oklab, var(--spark-400) 55%, transparent);

  /* Focus */
  --focus-width: 3px;  /* @kind spacing */
  --focus-offset: 2px; /* @kind spacing */

  /* Motion — calm, precise easing; no bounce */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --dur-fast: 120ms;   /* @kind other */
  --dur-base: 200ms;   /* @kind other */
  --dur-slow: 360ms;   /* @kind other */
  --dur-slower: 560ms; /* @kind other */

  /* Z-index scale */
  --z-base: 0;      /* @kind other */
  --z-raised: 10;   /* @kind other */
  --z-sticky: 100;  /* @kind other */
  --z-header: 200;  /* @kind other */
  --z-overlay: 800; /* @kind other */
  --z-modal: 900;   /* @kind other */
  --z-toast: 1000;  /* @kind other */

  /* Blur (glass surfaces) */
  --blur-sm: 8px;  /* @kind other */
  --blur-md: 16px; /* @kind other */
  --blur-lg: 28px; /* @kind other */
}

/* ==== ./tokens/base.css ==== */
/* ============================================================
   On Behalf AI — Base layer
   Resets + element defaults. Dark theme is the default.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  font-weight:var(--weight-body);
  font-size:var(--text-base);
  line-height:var(--leading-normal);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  font-weight:var(--weight-heading);
  line-height:var(--leading-snug);
  letter-spacing:var(--tracking-tight);
  color:var(--text);
  text-wrap:balance;
}
p{text-wrap:pretty}
a{color:var(--link);text-decoration:none;transition:color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--link-hover)}
strong,b{font-weight:var(--weight-strong)}
small{font-size:var(--text-sm)}
code,kbd,samp,pre{font-family:var(--font-mono);font-size:0.92em}
img,svg,video,canvas{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none;padding:0}
ul,ol{padding:0;list-style:none}
hr{border:none;border-top:1px solid var(--border)}
:focus-visible{outline:var(--focus-width) solid var(--focus-ring);outline-offset:var(--focus-offset);border-radius:var(--radius-xs)}
::selection{background:color-mix(in oklab,var(--blue-400) 40%,transparent);color:var(--brand-white)}

/* Scrollbar (dark) */
*{scrollbar-color:var(--ink-600) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--ink-600);border-radius:var(--radius-pill);border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--ink-500)}
::-webkit-scrollbar-track{background:transparent}

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

/* ---- Small, reusable helpers (opt-in) ---- */
.obai-eyebrow{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  font-weight:var(--fw-medium);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--accent-text);
}
.obai-container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.obai-spark-text{
  background:var(--grad-spark);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ============================================================
   On Behalf AI — Design System
   Global entry point. Consumers link THIS file only.
   Import order matters: fonts → tokens → base.
   ============================================================ */