/* Design tokens — compiled from _ds/openai-b29c8b53…/tokens/*.css. Edit the source tokens, then rebuild. */

/* ---- fonts.css ---- */
/* ============================================================
   FONTS
   ------------------------------------------------------------
   SUBSTITUTION NOTICE
   The OpenAI brand uses the proprietary typefaces "OpenAI Sans"
   and "OpenAI Sans Mono" (ABC Dinamo, 2025) — geometric forms
   with a perfectly circular 'O' and subtle humanist imperfections.
   These cannot be redistributed. We substitute the closest free
   matches from Google Fonts:
     • Hanken Grotesk  → OpenAI Sans   (geometric, circular, warm)
     • Geist Mono      → OpenAI Sans Mono (clean geometric mono)
   Swap these for the licensed brand fonts when available.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Geist+Mono:wght@400;500;600&display=swap");

/* ---- colors.css ---- */
/* ============================================================
   COLORS
   The OpenAI identity is resolutely monochrome: black, white,
   and a neutral gray ramp. "The Point" — a pure black dot — is
   the brand's anchor. Color is used sparingly and functionally.
   ============================================================ */
:root {
  /* ---- Absolutes ---- */
  --black: #000000;
  --white: #ffffff;

  /* ---- Neutral ramp (near-neutral, a hair warm) ---- */
  --gray-50:  #fafafa;
  --gray-100: #f4f4f3;
  --gray-200: #e7e7e4;
  --gray-300: #d6d6d2;
  --gray-400: #adadab;
  --gray-500: #82827f;
  --gray-600: #5c5c5a;
  --gray-700: #424241;
  --gray-800: #2a2a29;
  --gray-900: #1a1a19;
  --gray-950: #0d0d0c;

  /* ---- Functional / semantic hues (muted, restrained) ---- */
  --green-50:  #ecf6f0;
  --green-500: #1a8a5f;   /* legacy product/ChatGPT green lineage */
  --green-600: #137350;
  --red-50:    #fdeceb;
  --red-500:   #d92d20;
  --red-600:   #b42318;
  --amber-50:  #fdf3e7;
  --amber-500: #dc6803;
  --amber-600: #b54708;
  --blue-50:   #eaf0fd;
  --blue-500:  #2563eb;
  --blue-600:  #1d4ed8;

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */

  /* Text */
  --text-primary:   var(--gray-950);
  --text-secondary: var(--gray-600);
  --text-tertiary:  var(--gray-500);
  --text-disabled:  var(--gray-400);
  --text-inverse:   var(--white);
  --text-link:      var(--gray-950);

  /* Surfaces */
  --surface-page:    var(--white);
  --surface-card:    var(--white);
  --surface-subtle:  var(--gray-50);
  --surface-sunken:  var(--gray-100);
  --surface-hover:   var(--gray-100);
  --surface-active:  var(--gray-200);
  --surface-inverse: var(--gray-950);

  /* Borders / hairlines */
  --border-subtle:  var(--gray-100);
  --border-default: var(--gray-200);
  --border-strong:  var(--gray-300);
  --border-inverse: var(--gray-800);

  /* Brand anchor — "The Point" */
  --point: var(--black);

  /* Action (primary = black, the brand's only "loud" move) */
  --action-primary:        var(--gray-950);
  --action-primary-hover:  var(--gray-800);
  --action-primary-active: var(--black);
  --action-on-primary:     var(--white);

  /* Focus ring */
  --focus-ring: var(--gray-950);

  /* Semantic feedback */
  --success-fg: var(--green-600);
  --success-bg: var(--green-50);
  --danger-fg:  var(--red-600);
  --danger-bg:  var(--red-50);
  --warning-fg: var(--amber-600);
  --warning-bg: var(--amber-50);
  --info-fg:    var(--blue-600);
  --info-bg:    var(--blue-50);
}

/* ---- typography.css ---- */
/* ============================================================
   TYPOGRAPHY
   Type-forward and quiet. Tight tracking on large display sizes,
   generous line-height on body. One sans for everything, one
   mono for code, labels, and numeric/technical accents.
   ============================================================ */
:root {
  /* Families */
  --font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-black:   800;

  /* Fluid display + static text scale (px) */
  --text-display-2xl: 76px;
  --text-display-xl:  60px;
  --text-display-lg:  48px;
  --text-display-md:  38px;
  --text-heading-lg:  30px;
  --text-heading-md:  24px;
  --text-heading-sm:  20px;
  --text-title:       18px;
  --text-body-lg:     17px;
  --text-body:        15px;
  --text-body-sm:     13.5px;
  --text-caption:     12px;
  --text-overline:    11px;

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.08;
  --leading-snug:    1.2;
  --leading-normal:  1.35;
  --leading-relaxed: 1.55;
  --leading-loose:   1.7;

  /* Letter spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.018em;
  --tracking-normal:  -0.006em;
  --tracking-wide:    0.02em;
  --tracking-overline: 0.08em;
}

/* ---- spacing.css ---- */
/* ============================================================
   SPACING — 4px base grid. Generous whitespace is a core motif;
   marketing sections breathe with the larger steps.
   ============================================================ */
:root {
  --space-0:   0px;
  --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;
  --space-32:  128px;
  --space-40:  160px;

  /* Layout */
  --container-max: 1200px;
  --container-prose: 720px;
  --gutter: var(--space-6);
  --section-y: var(--space-32);
}

/* ---- radius.css ---- */
/* ============================================================
   RADIUS — soft but not bubbly. Controls (buttons, inputs) lean
   pill on marketing; cards and surfaces use medium-large radii.
   ============================================================ */
:root {
  --radius-none: 0px;
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;
  --radius-circle: 50%;
}

/* ---- elevation.css ---- */
/* ============================================================
   ELEVATION — the brand is mostly flat, defined by hairline
   borders rather than shadow. Shadows are soft, low-contrast,
   and reserved for floating surfaces (menus, dialogs, toasts).
   ============================================================ */
:root {
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(13, 13, 12, 0.04);
  --shadow-sm: 0 1px 2px rgba(13, 13, 12, 0.05), 0 1px 1px rgba(13, 13, 12, 0.04);
  --shadow-md: 0 4px 12px rgba(13, 13, 12, 0.07), 0 1px 2px rgba(13, 13, 12, 0.05);
  --shadow-lg: 0 12px 32px rgba(13, 13, 12, 0.10), 0 2px 6px rgba(13, 13, 12, 0.05);
  --shadow-xl: 0 24px 64px rgba(13, 13, 12, 0.14), 0 6px 16px rgba(13, 13, 12, 0.06);

  /* Hairline ring used in place of shadow for resting surfaces */
  --ring-hairline: inset 0 0 0 1px var(--border-default);
}

/* ---- motion.css ---- */
/* ============================================================
   MOTION — restrained and confident. Quick, eased fades and
   small translations. No bounce, no overshoot. Easing favors
   a calm ease-out; hovers are near-instant.
   ============================================================ */
:root {
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */

  --duration-instant: 80ms; /* @kind other */
  --duration-fast:    140ms; /* @kind other */
  --duration-base:    220ms; /* @kind other */
  --duration-slow:    400ms; /* @kind other */
  --duration-slower:  640ms; /* @kind other */
}

/* ---- base.css ---- */
/* ============================================================
   BASE — minimal, opinionated resets + element defaults that
   express the brand's quiet typographic foundation.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
  color: var(--text-primary);
  background: var(--surface-page);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.18em; }

code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.92em; }

::selection { background: var(--gray-950); color: var(--white); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

button { font-family: inherit; }

/* Brand utility: "The Point" — a pure black dot motif */
.oai-point {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  border-radius: var(--radius-circle);
  background: var(--point);
  vertical-align: middle;
}