/* Design tokens — single source of truth for colour, type, space, shape.
   Values mirror jwt.io / openidconnect.net (globals.scss).
   Dark is the default; Light overrides under data-theme="light|system-light".
   Other stylesheets must consume these tokens and never hard-code colours. */

@font-face {
  font-family: 'Aeonik';
  src: url('/assets/fonts/Aeonik-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Aeonik';
  src: url('/assets/fonts/Aeonik-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Aeonik';
  src: url('/assets/fonts/Aeonik-Bold.woff2') format('woff2');
  font-weight: 600 700;
  font-display: swap;
}

/* Self-hosted Inter and Roboto Mono (variable weight ranges, latin + latin-ext). */
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto Mono';
  src: url('/assets/fonts/roboto-mono-latin-ext.woff2') format('woff2');
  font-weight: 400 500;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto Mono';
  src: url('/assets/fonts/roboto-mono-latin.woff2') format('woff2');
  font-weight: 400 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  /* ---- Primitives: grays ---- */
  --gray-0: #fff;
  --gray-50: #fbfbfb;
  --gray-100: #f6f6f6;
  --gray-150: #f1f1f1;
  --gray-200: #e5e5e5;
  --gray-250: #d7d7d7;
  --gray-400: #ababab;
  --gray-450: #8e8e8e;
  --gray-500: #808080;
  --gray-550: #686868;
  --gray-650: #3e3e3e;
  --gray-700: #383838;
  --gray-750: #2a2a2a;
  --gray-800: #242424;
  --gray-850: #1e1e1e;
  --gray-900: #171717;
  --gray-950: #111;
  --charcoal: #191919;

  /* ---- Primitives: brand ---- */
  --sky: #3f59e4;
  --sky-hover: #3449ba;
  --sky-pressed: #263588;
  --cloud: #b6c9ff;
  --cobalt: #1a31a9;
  --violet: #7549f2;
  --eggplant: #4016a0;
  --seafoam: #4cb7a3;
  --ocean: #096256;
  --periwinkle: #99a7f1;

  /* ---- Primitives: type ---- */
  --font-primary: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-secondary: 'Aeonik', 'Inter', system-ui, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale, mobile first. Sizes step up at the tablet (768px) and desktop (1200px) breakpoints, the same ones
     openidconnect.net uses (its page title is 32 / 40 / 56px). Everything is in rem, so the browser's text-size
     setting scales the whole page. 12px is the floor for any text; running text is 14px or more.
                  mobile   tablet   desktop
       xs          12       12       12     labels, tags, hosts
       sm          14       14       14     secondary text, buttons, code
       md          16       16       16     body
       lg          18       20       20     lead paragraphs, small headings
       xl          24       28       28     card and section sub-titles
       2xl         28       32       36     section headings
       3xl         32       40       48     page titles
       (page titles are 3xl; there is no larger step)  */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2rem;

  /* ---- Primitives: space, shape, motion ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 5rem;

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-pill: 9999px;

  --nav-height: 4rem;
  --content-max: 1312px;
  --article-max: 776px;
  --duration-fast: 0.12s;
  --duration-base: 0.2s;

  /* ---- Semantic: surfaces ---- */
  --color_bg_page: var(--gray-950);
  --color_bg_layer: var(--gray-950);
  --color_bg_layer_alternate: var(--gray-850);
  --color_bg_layer_alternate-bold: var(--gray-750);
  --color_bg_layer_elevated: var(--gray-900);
  --color_bg_layer_bold: var(--gray-700);
  --color_bg_app_bar: hsla(0, 0%, 95%, 0.04);
  --color_bg_app_bar_border: hsla(0, 0%, 95%, 0.12);
  --color_bg_app_bar_plain: rgb(17, 17, 17);
  /* Hero surface: the OIDC playground's blurred indigo -> blue -> teal band, rebuilt as layered
     glows so it scales with the box. Brand stops: #4016a0 indigo, #3f59e4 blue, #4cb7a3 teal. */
  --color_bg_hero:
    radial-gradient(55% 85% at 92% 100%, rgba(63, 89, 228, 0.6), transparent 72%),
    radial-gradient(60% 90% at 100% 0%, rgba(64, 22, 160, 0.85), transparent 70%),
    radial-gradient(40% 60% at 72% 100%, rgba(76, 183, 163, 0.22), transparent 75%),
    radial-gradient(50% 70% at 0% 100%, rgba(64, 22, 160, 0.5), transparent 72%),
    linear-gradient(194deg, #171717 -23.81%, #191919 85.24%);
  --color_bg_hero_panel: none;

  /* Glass glow behind the hero and "How it works" (light theme only; see partials/glow.njk). The colours are
     the Figma pill group's fills and the Auth0 band's gradient stops. */
  --glow_display: none;
  --art_dark_display: block;
  --art_light_display: none;

  --glow_pink: #fa58d7;
  --glow_coral: #fb5648;
  --glow_indigo: #635dff;
  --glow_cyan: #3ec6eb;
  --shadow_glass: none;

  /* Resource tiles (home Browse, category pages, search): measured from developer.auth0.com. */
  --color_bg_tile: #191919;
  --color_bg_tile_icon: #232323;
  --color_fg_tile_desc: var(--gray-200);

  /* "How it works" card: shares the hero's surface in dark; in light it uses the tile colours
     (the hero keeps its own grey) so the two sections read as one family. */
  --color_bg_feature: var(--color_bg_hero);
  --color_fg_feature_muted: var(--color_fg_hero_muted);

  --color_fg_hero: var(--gray-50);
  --color_fg_hero_muted: var(--gray-200);
  --color_bg_accent_subtle: #161f50;

  /* ---- Semantic: foreground ---- */
  --color_fg_bold: var(--gray-50);
  --color_fg_default: var(--gray-200);
  --color_fg_muted: var(--gray-400);
  --color_fg_nav: var(--gray-200);
  --color_fg_link: var(--cloud);
  --color_fg_strong: var(--periwinkle);
  --color_fg_disabled: var(--gray-500);

  /* ---- Semantic: borders & focus ---- */
  --color_border_default: var(--gray-750);
  --color_border_bold: var(--gray-700);
  --color_border_hover: var(--periwinkle);
  --color_border_focus: var(--periwinkle);

  /* ---- Semantic: controls ---- */
  --color_bg_button: var(--gray-950);
  --color_bg_button_hover: var(--gray-800);
  --color_bg_button_pressed: var(--gray-750);
  --color_fg_on_button: var(--gray-50);
  --color_border_button: var(--gray-700);
  --color_bg_primary: var(--sky);
  --color_bg_primary_hover: var(--sky-hover);
  --color_fg_on_primary: var(--gray-0);
  --color_bg_input: var(--gray-950);
  --color_border_input: var(--gray-500);
  --color_border_input_hover: var(--gray-400);
  --color_fg_input_placeholder: var(--gray-500);

  /* ---- Semantic: status ---- */
  --color_bg_state_info_subtle: #161f50;
  --color_fg_on_state_info_subtle: #b9c3f5;
  --color_border_state_info: var(--periwinkle);
  --color_bg_state_danger_subtle: #46110e;
  --color_fg_on_state_danger_subtle: #f0b7b4;
  --color_border_state_danger: #e89590;


  --gradient_logo: linear-gradient(100deg, #ff4f40 0%, #ff44dd 100%);
  /* The same coral -> pink at low alpha: a translucent wash for badges, so it works on any surface. */
  --gradient_logo_subtle: linear-gradient(100deg, rgb(255 79 64 / 0.18) 0%, rgb(255 68 221 / 0.18) 100%);
  --gradient_brand: linear-gradient(49deg, #4cb7a3 2.88%, #3f59e4 51.63%, #7549f2 96.1%);

  /* ---- Semantic: effects ---- */
  --shadow_app_bar: 0 12px 24px -12px rgba(0, 0, 0, 0.4);
  --shadow_raised: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow_card_hover: 0 12px 24px -16px rgba(0, 0, 0, 0.6);
  --focus-ring: 2px solid var(--color_border_focus);

  /* ---- Semantic: diagram (Mermaid SVG overrides) ---- */
  --color_diagram_text: var(--color_fg_default);
  --color_diagram_line: var(--gray-500);
  --color_diagram_actor_bg: var(--color_bg_tile_icon);
  --color_diagram_actor_border: var(--gray-650);
  --color_diagram_actor_text: var(--color_fg_bold);
  --color_diagram_lifeline: var(--gray-700);
  --color_diagram_badge_bg: var(--color_bg_primary);
  --color_diagram_badge_text: var(--color_fg_on_primary);
  --color_diagram_note_bg: var(--color_bg_state_info_subtle);
  --color_diagram_note_border: var(--color_border_state_info);


  /* ---- Semantic: modal ---- */
  --color_bg_scrim: rgba(10, 10, 10, 0.38);
  --color_bg_modal: color-mix(in srgb, var(--gray-900) 82%, transparent);

  /* Code block (Figma "Universal Design Language" node 457:2311): pure-black body inside a #111 frame. */
  --color_code_frame: #111111;
  --color_code_frame_ring: rgb(255 255 255 / 0.08);
  --color_code_head_text: #808080;
  --color_code_file_bg: #2a2a2a;
  --color_code_file_text: #c5c5c5;
  --color_code_bg: #000000;
  --color_code_text: #ffffff;
  --color_code_lineno: #6a6a6a;
  --color_code_string: #8fc88a;
  --color_code_number: #b1e4de;
  --color_code_keyword: #f2ac84;
  --color_code_tag: #b49bfc;
  --color_code_attr: #f4d594;
  --color_code_punct: #8e8e8e;
  --color_code_comment: #7a7a7a;
}

html[data-theme='light'],
html[data-theme='system-light'] {
  color-scheme: light;

  --color_bg_page: var(--gray-0);
  --color_bg_layer: var(--gray-0);
  --color_bg_layer_alternate: var(--gray-100);
  --color_bg_layer_alternate-bold: var(--gray-150);
  --color_bg_layer_elevated: var(--gray-0);
  --color_bg_layer_bold: var(--gray-250);
  --color_bg_app_bar: hsla(0, 0%, 7%, 0.04);
  --color_bg_app_bar_border: hsla(0, 0%, 7%, 0.12);
  --color_bg_app_bar_plain: rgb(241, 241, 241);
  /* Light mode mirrors openidconnect.net: a flat grey hero, with the artwork standing on its own
     dark brand-gradient panel (values from hero-jumbotron.module.scss). */
  --color_bg_hero: var(--color_bg_tile);   /* the same grey as the tiles below it, so they always match */
  --color_bg_hero_panel: none;   /* light: the illustration stands on the glass glow, not on a dark panel */
  --glow_display: block;
  --art_dark_display: none;
  --art_light_display: block;

  --shadow_glass: inset 0 1px 0 rgb(255 255 255 / 0.95), 0 24px 48px -32px rgb(84 66 170 / 0.28);
  --color_bg_tile: var(--gray-100);
  --color_bg_tile_icon: #efefef;
  --color_fg_tile_desc: #393939;
  --color_bg_feature: var(--color_bg_tile);
  --color_fg_feature_muted: var(--color_fg_tile_desc);
  --color_fg_hero: var(--charcoal);
  --color_fg_hero_muted: var(--gray-650);
  --color_bg_accent_subtle: #eef0fd;

  --color_fg_bold: var(--charcoal);
  --color_fg_default: var(--gray-650);
  --color_fg_muted: var(--gray-550);
  /* jwt.io uses #808080 here (3.9:1 on white, below AA); #686868 keeps the same muted look at 5.4:1. */
  --color_fg_nav: var(--gray-550);
  --color_fg_link: var(--sky);
  --color_fg_strong: var(--sky);
  --color_fg_disabled: var(--gray-500);

  --color_border_default: #e8e8e8;
  --color_border_bold: var(--gray-250);
  --color_border_hover: var(--sky);
  --color_border_focus: var(--sky);

  --color_bg_button: var(--gray-0);
  --color_bg_button_hover: var(--gray-150);
  --color_bg_button_pressed: #e8e8e8;
  --color_fg_on_button: var(--charcoal);
  --color_border_button: var(--gray-250);
  --color_bg_input: var(--gray-0);
  --color_border_input: var(--gray-450);
  --color_border_input_hover: var(--gray-550);

  --color_bg_state_info_subtle: #eef0fd;
  --color_fg_on_state_info_subtle: var(--sky-pressed);
  --color_border_state_info: var(--sky);
  --color_bg_state_danger_subtle: #fbeeed;
  --color_fg_on_state_danger_subtle: #761c17;
  --color_border_state_danger: #c32f26;


  --gradient_brand: linear-gradient(49deg, #0a7263 2.88%, #3f59e4 51.63%, #7549f2 96.1%);

  --shadow_app_bar: 0 12px 24px -12px rgba(0, 0, 0, 0.04);
  --shadow_raised: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 1px -0.5px rgba(0, 0, 0, 0.04);
  --shadow_card_hover: 0 12px 24px -16px rgba(0, 0, 0, 0.2);

  --color_diagram_text: var(--color_fg_default);
  --color_diagram_line: var(--gray-550);
  --color_diagram_actor_bg: var(--gray-0);
  --color_diagram_actor_border: var(--gray-250);
  --color_diagram_actor_text: var(--color_fg_bold);
  --color_diagram_lifeline: var(--gray-250);
  --color_diagram_badge_bg: var(--color_bg_primary);
  --color_diagram_badge_text: var(--color_fg_on_primary);
  --color_diagram_note_bg: var(--color_bg_state_info_subtle);
  --color_diagram_note_border: var(--color_border_state_info);


  --color_bg_scrim: rgba(235, 235, 235, 0.42);
  --color_bg_modal: color-mix(in srgb, var(--gray-0) 84%, transparent);

  /* Code block, light. The frame, header text and chips use the site's own neutral greys (the frame is the tile
     colour, so it can never drift from the tiles); only the syntax colours below come from the design file's
     light palette (node 3194:11316), taken from the darker half so text stays above 4.5:1 on white. */
  --color_code_frame: var(--color_bg_tile);
  --color_code_frame_ring: rgb(0 0 0 / 0.07);
  --color_code_head_text: #686868;
  --color_code_file_bg: #e9e9e9;
  --color_code_file_text: #393939;
  --color_code_bg: #ffffff;
  --color_code_text: #191919;             /* Carbon 12 */
  --color_code_lineno: #8a8a8a;
  --color_code_string: #158047;           /* Green 9 */
  --color_code_number: #257c6f;           /* Teal 8 */
  --color_code_keyword: #af411f;          /* Orange 9 */
  --color_code_tag: #7549f2;              /* Indigo 8 */
  --color_code_attr: #936101;             /* Yellow 10 */
  --color_code_punct: #6f685f;            /* Carbon 8 */
  --color_code_comment: #6f685f;          /* Carbon 8 */
}

/* ---- Type scale: tablet and desktop steps (see the table beside the mobile values above) ---- */

@media (min-width: 768px) {
  :root {
    --text-lg: 1.25rem;
    --text-xl: 1.75rem;
    --text-2xl: 2rem;
    --text-3xl: 2.5rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --text-2xl: 2.25rem;
    --text-3xl: 3rem;
  }
}