/* Radeon Cloud design tokens. Dark is the default; light is :root[data-theme="light"].
   Pages must not introduce new hex values, spacing, or font sizes — request a token instead.

   COLOUR RULE — read before adding a button or a chart.

   --action  Advancing AI blue. "Something you do." The fill for the primary
             action on a surface: Launch instance, Save key, Build image.
   --graph   The same blue family, for things the system is SHOWING you: the
             lattice, the step rail, meters, selection tints. Never a filled
             control.
   --danger  Red. "Something went wrong" — error text, icons, failed steps.

   ONE ACCENT IN BOTH THEMES. The cyan is the product's colour whichever way the
   switch is flipped; --graph used to collapse to near-black in light mode, which
   made the lattice, step rail and selection borders lose the accent entirely on
   half the site. Same HUE both themes (OKLCH H 212-214), different LIGHTNESS per
   surface — see the light block for the measured ceiling.

   Blue does double duty, so the thing separating a button from a graphic is FORM,
   not hue: an action is a solid filled block with a label; a graphic is small
   cells and hairlines and is never filled at button scale. Keep it that way — if
   you find yourself drawing a large blue slab that is not clickable, it will read
   as a button.

   THE TEXT-ON-FILL TRAP. This blue is LIGHT (luminance 0.44), so white-on-blue is
   only 2.2:1 and fails AA badly. In dark mode `--on-action` is therefore near-BLACK
   (8.5:1), not white, and hover BRIGHTENS. Light mode steps the SAME hue down until
   white-on-it reaches 4.5:1, and hover DARKENS — opposite mechanics, one colour. Do
   not "simplify" these into one value; that is the exact bug that made the original
   launch button unreadable.

   Destructive controls (Destroy, Delete, Revoke) are NOT --action. They are a
   neutral outline that turns red on hover/focus plus a confirm step, so launch and
   destroy can never be mistaken for one another. Now that the primary action is
   blue, that separation is carried by hue as well as weight. */

:root {
  color-scheme: dark;

  /* Surfaces — neutral black, deliberately not a blue-cast black. AMD red reads
     muddy over blue-black, and the blue cast made the product look like GitHub. */
  --bg: #0B0B0C;
  --surface: #141416;
  --control: #1C1C1F;
  --surface-inset: #08080A;
  --surface-raised: #1C1C1F;

  /* Lines. --border and --border-emphasis are decorative separators and are
     intentionally low-contrast. Anything that bounds an interactive control —
     input, select, outline button — must use --border-control, which clears the
     3:1 that WCAG 1.4.11 requires for UI components against BOTH --bg and --surface. */
  --border: #26262A;
  --border-muted: #26262AB3;
  --border-emphasis: #3D3D42;
  --border-control: #686873;

  /* Text */
  --text: #F5F5F6;
  --text-muted: #A1A1A8;
  --text-subtle: #7E7E86;

  /* Action — Advancing AI blue.
     Hover/active BRIGHTEN. This is the opposite of the old red rule and it is
     deliberate: the text on this fill is near-black, so raising the fill's
     luminance RAISES contrast. Darkening would squeeze the black label. */
  --action: #00C2DE;
  --action-hover: #33D2E8;
  --action-active: #5FDFF0;
  /* Near-black, NOT white. White on #00C2DE is 2.2:1 and fails AA outright;
     this is 8.5:1. The single most important value in this file. */
  --on-action: #06181C;
  --action-soft: #00C2DE1F;
  --focus-ring: #4FDCF2;

  /* Blue as TEXT on a dark surface. Same hue, used for links and inline accents
     where there is no fill to sit on. 8.9:1 on --surface. */
  --action-text: #4FDCF2;

  /* The hero's cycling word. The ONE colour that is identical in both themes:
     it is the brand moment on the landing page, and letting it collapse to
     near-black in light mode (as --graph does) made the headline read as two
     different products. Light mode uses the darker teal so it still clears AA
     on white — same hue, same role, adjusted only for the surface it sits on. */
  --hero-accent: #00C2DE;

  /* Graph — the same blue, for things the system SHOWS you: lattice cells, step
     rail, meters, selection tints. Distinguished from --action by form, not hue:
     graphics are small cells and hairlines, never a filled control. */
  --graph: #00C2DE;
  --graph-strong: #4FDCF2;
  --graph-dim: #0A6E80;
  --graph-soft: #00C2DE1F;
  --graph-line: #00C2DE4D;

  /* SERIES — categorical identity in multi-line charts. A DIFFERENT JOB from
     --graph, which is one accent for "the system is showing you something".
     When four lines share one hue and differ only by dash pattern, they are not
     four series, they are one series drawn four times: the admin chart was four
     greys and unreadable.

     Slot order is the colourblind-safety mechanism, not decoration. These were
     not eyeballed — each was snapped to the nearest step passing the OKLCH
     lightness band, the chroma floor, Machado-2009 CVD separation under
     protanopia/deuteranopia, and 3:1 against the surface. Worst adjacent pair
     is ΔE 61.6 against a ≥12 target. Re-validate before changing any of them.

     Slot 1 is NOT --graph (#00C2DE): at OKLCH L 0.748 it sits above the dark
     band, so it failed and this is the nearest passing step of the same cyan.
     (Light mode makes the opposite choice — there slot 1 IS --graph. The two
     themes have different binding constraints: dark is capped by the lightness
     band, light by 3:1 on --surface-inset.) */
  --series-1: #00A3BD;
  --series-2: #D95926;
  --series-3: #9085E9;
  --series-4: #199E70;

  /* Status — what the system reports, never what you click. */
  --danger: #FF6B62;
  --success: #3FB950;
  --attention: #D9A441;
  --info: #6FA8FF;

  /* Rails */
  --rail: 1280px;
  --rail-wide: 1440px;
  --page-rail: var(--rail);
  --page-gutter: clamp(16px, 3vw, 40px);
  --page-top: clamp(24px, 3vw, 40px);
  --panel-padding: clamp(16px, 2.5vw, 32px);
  --site-help-footer-rail: var(--page-rail);
  /* CHROME IS WIDER THAN CONTENT, DELIBERATELY. The header used to share
     --page-rail (1280px), which put the brand 120px inside the viewport edge on a
     1440px screen — 40px of gutter plus 80px of centring dead space — and the
     account chip the same distance in from the right. A sticky identity bar reads
     as the frame of the page, so it runs closer to the edge than the column it
     frames; developer.amd.com does the same.

     Capped rather than full-bleed: unbounded, a 2560px monitor would strand the
     brand and the account 2.4k apart with nothing between them. 1760px is past
     every laptop width (so those get a clean 40px gutter and no dead space) and
     still holds the two ends in one glance on a desktop.

     Content keeps --page-rail. The nav tier uses this same variable, so the
     brand and the nav links stay on one vertical line. */
  --header-rail: 1760px;
  --header-identity-height: 76px;
  --header-brand-height: 24px;
  --hero-padding-block: clamp(32px, 5vw, 64px);
  --hero-padding-inline: clamp(24px, 5vw, 72px);
  --hero-min-height: clamp(220px, 24vw, 280px);
  --header-height: calc(var(--header-identity-height) + var(--header-nav-height));
  --control-height: 40px;
  --control-height-sm: 32px;
  --control-height-lg: 48px;
  --scrollbar-thumb: var(--border-control);
  --scrollbar-track: var(--surface-inset);
  --scrollbar-hover: var(--text-muted);
  --scrollbar-active: var(--text);

  /* Radii — squared off. A HUD is machined, not rounded; rounded corners are the
     single strongest signal that a UI came from a generic component kit.
     --radius-pill survives for dots and status indicators only, where a circle
     is the shape's actual meaning rather than a softening. */
  --radius-control: 0px;
  --radius-card: 0px;
  --radius-pill: 999px;

  /* The chamfer. One corner cut on panels, always the same corner, always this
     size — it reads as a manufacturing mark rather than decoration. */
  --notch: 10px;

  /* Spacing — 4px base. The absence of this scale is why card padding
     drifted across 22/28/36/40px in the previous build. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Type scale */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 22px;
  --text-xl: 28px;
  --text-2xl: clamp(28px, 2.6vw, 36px);
  --text-3xl: 48px;
  --text-hero: clamp(30px, 4.4vw, 56px);
  --text-4xl: clamp(40px, 6vw, 68px);

  --leading-tight: 1.12;
  --leading-snug: 1.35;
  --leading-normal: 1.6;

  /* Chakra Petch is already narrow and squared, so the negative tracking that
     suited Archivo would jam its flat terminals together. Headings sit at 0 and
     let the letterforms do the work. */
  --tracking-display: 0;
  --tracking-eyebrow: 0.1em;
  --tracking-label: 0.04em;

  /* Compact navigation keeps the product workspace above the fold. The brand
     retains its own tier, while route labels share the interface type scale. */
  --header-nav-height: 52px;
  --header-nav-gap: 4px;
  --header-nav-item-pad: 20px;
  --header-nav-size: 16px;
  --header-nav-tracking: 0.01em;

  /* Type. Chakra Petch carries every heading; Plex Sans carries everything else.
     Plex Sans SC covers Simplified Chinese in the same family, so switching
     language does not change the texture of the page.

     Chakra Petch is the one type decision the whole visual direction rests on:
     squared counters, clipped corners, flat terminals. It reads as the
     Cyberpunk-2077 HUD register the brief asks for, and it is close enough to
     the RADEON wordmark's construction that "CLOUD" set in it sits beside the
     logo as if drawn with it. */
  --font-display: "Chakra Petch", "IBM Plex Sans", "IBM Plex Sans SC", system-ui, sans-serif;
  --font: "IBM Plex Sans", "IBM Plex Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.55);
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #FDFCFC;
  --surface: #FFFFFF;
  --control: #FFFFFF;
  --surface-inset: #F4F2F1;
  --surface-raised: #FFFFFF;

  --border: #E0DEDC;
  --border-muted: #EBE9E7;
  --border-emphasis: #B3B1AE;
  --border-control: #8E8C88;

  --text: #16161A;
  --text-muted: #5A5A63;
  --text-subtle: #6E6E78;

  /* ONE ACCENT, BOTH THEMES. Light mode wears the same accent as dark — the
     product should not change colour when you flip the switch.

     It cannot be the same HEX. #00C2DE measures 2.15:1 on white and 1.93:1 on
     --surface-inset, so it fails the 3:1 that WCAG 1.4.11 asks of a control's
     own edge, let alone 4.5:1 for a label. "Same accent" therefore means same
     colour FAMILY, stepped for the surface — which is what dark mode already
     does in reverse, where --on-action is near-black rather than white.

     WHY THESE ARE NOT AT DARK'S HUE ANGLE, and why that was the bug.
     These used to sit at OKLCH H 212-214, matched to dark's H 213 on the theory
     that equal hue angle reads as equal colour. It does not. Hue APPEARANCE
     shifts with lightness — the Bezold-Brucke effect — and cyan is where the
     shift is worst: at dark mode's L 0.75, H 213 reads as a blue-leaning cyan;
     at the L 0.54 a light-mode fill needs, the identical angle reads as TEAL,
     visibly green. Holding the number constant is what produced the mismatch.

     So the light steps are rotated to H 238, roughly 25 degrees bluewards, which
     lands them back at dark's cyan in APPEARANCE rather than in coordinates.
     Rotating toward blue also buys chroma: the sRGB gamut is wider there at low
     lightness, so C rises 0.106 -> 0.141 and the colour reads as a saturated
     azure instead of a muted teal. Measured, not guessed.

     TWO STEPS, BY ROLE, on purpose:
       --graph  #0095D6  non-interactive graphics, needs only 3:1 (WCAG 1.4.11),
                         so it stays brighter and closer to the dark accent.
       --action #007EB6  fills that carry WHITE text, so it must reach 4.5:1.
     Collapsing them to one value either dims the graphics needlessly or makes
     the buttons fail.

     #0095D6 IS THE CEILING, not a preference — it is the brightest H 238 that
     still clears 3:1 on --surface-inset (3.00:1, with 3.35:1 to spare on white).
     Test any change against INSET, not just white: on plain white a brighter
     value looks fine, which is how this class of bug ships. */

  /* Hover DARKENS here, the mirror of the dark-mode rule: the label is white,
     so lowering the fill's luminance is what raises contrast. */
  --action: #007EB6;         /* white-on-fill 4.51:1 */
  --action-hover: #006998;   /* 6.04:1 */
  --action-active: #00547B;  /* 8.22:1 */
  --on-action: #FFFFFF;
  --action-soft: #007EB61A;
  --focus-ring: #007EB6;

  /* Dark enough to serve as text on white: 4.51:1. */
  --action-text: #007EB6;

  /* The cycling word in the hero. Matches --action-text so the headline accent
     and the interactive accent are the same colour. */
  --hero-accent: #007EB6;

  --graph: #0095D6;          /* 3.35:1 on white, 3.00:1 on inset */
  --graph-strong: #0079AF;   /* emphasis step; 4.32:1 on inset */
  --graph-dim: #83C4EE;      /* recessive: unfilled lattice cells, never text */
  --graph-soft: #0095D61A;
  --graph-line: #0095D640;

  /* The same four hues, re-stepped for the light surface and re-validated as a
     set (worst adjacent ΔE 60.9); they are NOT the dark values, which fail the
     light band.

     Slot 1 is --graph's exact value, not a fourth blue. It was #00849B, which
     sat between --graph and --action — three near-identical teals on one page,
     none distinguishable from the others. Sharing the value makes "the accent"
     and "series one" deliberately the same colour.

     Re-validated after the H 238 rotation. Worst adjacent separation is s1/s3
     (this blue vs the violet) at OKLab dE 23.7 — was 24.2 at the old teal, so
     the rotation costs 0.5 and stays far above the ~15 where slots start to
     merge. Under simulated protanopia the worst pair is s2/s4 at 3.4, which is
     the orange/green collision and is UNCHANGED by slot 1: it measures 3.4 with
     the old teal too. Pre-existing, and a separate fix. */
  --series-1: #0095D6;
  --series-2: #EB6834;
  --series-3: #4A3AA7;
  --series-4: #008300;

  --danger: #C4141C;
  --success: #1A7F37;
  --attention: #8A6100;
  --info: #0B62D0;

  --shadow-card: 0 1px 2px rgba(20, 20, 22, 0.06);
  --shadow-pop: 0 12px 32px rgba(20, 20, 22, 0.14);
}