/*
  Medialize design tokens. The one place the portal's look is defined.
  The values come from medialize.io (website/site), so the portal and the site
  read as one platform: cream pages, ink type and bands, pink for the action,
  violet for big moments and for coloured text, Archivo wide for headlines.
  Plain CSS custom properties with no portal-only dependencies, so the website
  can load the same file. Arc's foundation.css is loaded before this file (styles.css),
  so these values win.
  Components read the semantic tokens, never the brand colours directly.
  Semantic names match Arc's, so Arc components pick up the brand as they arrive.
  Breakpoint for desk layouts: 56rem. CSS can't read that from a variable, so
  every module repeats it.
*/

:root {
  /* Brand, as on the website */
  --ink: #212121;
  --cream: #efebe1;
  --pink: #ff6ad5; /* The action. A fill, never text on cream. */
  --violet: #601ff9; /* Big moments, and coloured text on cream. */
  --violet-deep: #4a12d6;
  --violet-grad: linear-gradient(150deg, var(--violet-deep) 0%, var(--violet) 48%, #8f15fb 100%);
  /* Bodo, the assistant, as drawn on the website: a cream body with a darker
     cream shade and a bright violet spark. On cream it turns violet. */
  --bodo-cream-shade: #d3ccbc;
  --bodo-spark: #bf00fe;

  /* Type. Archivo for everything, at the site's widths; Space Mono for small figures. */
  --font-display: "Archivo Variable", "Arial Black", system-ui, sans-serif;
  --font-body: "Archivo Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-label: "Space Mono", ui-monospace, monospace;
  --stretch-display: 112%; /* The site's section headlines. */
  --stretch-wide: 125%; /* The site's hero and big numbers. */
  --stretch-normal: 100%;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-strong: 600; /* The site's buttons, labels and card titles. */
  --weight-display: 800; /* The site's section headlines. */
  --weight-hero: 900; /* The site's hero: page titles and big numbers. */
  /* Older names, kept so every module follows the weights above. */
  --weight-bold: var(--weight-strong);
  --weight-heavy: var(--weight-display);
  --weight-black: var(--weight-hero);
  /* Page titles as on the site's hero: wide, heaviest, upper case. Switch here. */
  --page-title-case: uppercase;
  --page-title-weight: var(--weight-hero);
  --page-title-stretch: var(--stretch-wide);
  --page-title-tracking: -0.005em;
  --page-title-leading: 0.95;
  /* Space Mono caps, as the site uses over a section or a figure. Sparingly. */
  --mono-label-case: uppercase;
  --mono-label-tracking: 0.14em;
  --mono-label-size: 0.75rem;
  --tracking-display: -0.025em;
  --tracking-title: -0.01em;
  --tracking-label: 0;
  --tracking-nav: 0;
  --leading-body: 1.55;
  --leading-snug: 1.3;
  --leading-tight: 1.05;
  --leading-display: 1.04;
  --text-2xs: 0.8125rem; /* Small labels, once mono caps. */
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-md: 0.875rem;
  --text-body: 0.9375rem;
  --text-base: 1rem;
  --text-lg: 1.0625rem; /* The site's lead and body size. */
  --text-xl: 1.25rem; /* The site's card titles. */
  --text-2xl: 1.5rem;
  --text-3xl: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); /* Page titles. */
  --text-4xl: clamp(2.5rem, 1.4rem + 3.4vw, 4rem); /* Big numbers. */

  /* Spacing: 4px steps, with halves where the type needs them. */
  --space-half: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-2-5: 0.625rem;
  --space-3: 0.75rem;
  --space-3-5: 0.875rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Sizes, as on the site: 44px small buttons, 48px buttons and fields, 72px header. */
  --control-height-sm: 2.25rem;
  --control-height-md: 2.75rem;
  --control-height-lg: 3.125rem;
  --header-height: calc(var(--header-gap) + var(--header-row)); /* The floating header and the gap above it. */
  --tab-height: 4rem;
  --sidebar-width: 16rem;
  --content-width: 78rem; /* The site's 1248px column. */
  --thumb-size: 3rem;

  /* Radii, from the site: 28px cards, 18px tiles, 14px fields, pill buttons. */
  --radius-sm: 0.625rem;
  --radius-control: 0.875rem;
  --radius-md: 1.125rem;
  --radius-lg: 1.375rem;
  --radius-xl: 1.75rem;
  --radius-pill: 999px;

  /* Motion, the site's ease. */
  --ease-press: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-press: 0.2s;
  --scale-press: 0.98;

  /* Status. Warm coral for warnings (Dan, 10 Nov 2026). No yellow or amber. */
  --danger: oklch(53% 0.18 10);
  --success: oklch(50% 0.12 162);
  --warning: oklch(52% 0.155 42);
  --info: oklch(51% 0.11 240);

  /* Small shadows: the portal's own. The site's depth (below) is on top of these. */
  --shadow-resting: 0 1px 2px oklch(0% 0 0 / 0.035);
  --shadow-raised: 0 6px 18px oklch(0% 0 0 / 0.065), 0 1px 3px oklch(0% 0 0 / 0.035);
  --shadow-floating: 0 20px 48px oklch(0% 0 0 / 0.105), 0 3px 10px oklch(0% 0 0 / 0.045);

  /* Depth, as on medialize.io (Andreas, 12-13 Nov 2026; Dan: no more flat look).
     Glass, a soft top highlight, deep soft shadows, pressable pink, rounded sheets
     that slide over each other. The exact values the site uses. */
  --violet-hot: #bf00fe;
  --violet-fill: linear-gradient(90deg, var(--violet), var(--violet-hot)); /* Progress and credit bars. */
  /* Glass: the floating header, and cards or menus that float over the page. */
  --glass-header: rgba(247, 244, 238, 0.68);
  --glass-surface: rgba(247, 244, 238, 0.82);
  --glass-border-header: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(255, 255, 255, 0.8);
  --glass-blur-header: saturate(1.6) blur(16px);
  --glass-blur: blur(12px);
  --glass-blur-soft: blur(10px); /* The soft blur above the floating header. */
  --header-fade: linear-gradient(var(--cream) 0, rgba(239, 235, 225, 0.6) 30%, rgba(239, 235, 225, 0) 100%);
  --header-fade-mask: linear-gradient(#000 45%, transparent);
  /* The soft top highlight. */
  --highlight-top: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
  --highlight-pressable: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  --highlight-top-ink: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  --highlight-top-ink-hover: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
  /* Shadows on cream. */
  --shadow-header: var(--highlight-top), 0 16px 40px -22px rgba(33, 33, 33, 0.35); /* The floating header pill. */
  --shadow-menu: 0 24px 50px -24px rgba(33, 33, 33, 0.4); /* The menu that drops from the header. */
  --shadow-card: var(--highlight-top), 0 24px 50px -22px rgba(33, 33, 33, 0.4); /* A glass card, resting. */
  --shadow-card-lift: 0 0 0 1px rgba(96, 31, 249, 0.35), 0 34px 60px -34px rgba(96, 31, 249, 0.55); /* A card you can open, on hover. */
  --shadow-card-hover: var(--highlight-top), var(--shadow-card-lift);
  /* The pink action: pressable, stronger on hover. */
  --shadow-pressable: var(--highlight-pressable), 0 14px 30px -12px rgba(255, 106, 213, 0.8);
  --shadow-pressable-hover: var(--highlight-pressable), 0 18px 34px -12px rgba(255, 106, 213, 0.9);
  /* Cards on ink. */
  --shadow-card-ink: var(--highlight-top-ink), 0 24px 50px -30px rgba(0, 0, 0, 0.6);
  --shadow-card-ink-hover: var(--highlight-top-ink-hover), 0 34px 60px -30px rgba(0, 0, 0, 0.7);
  --shadow-stage-ink: var(--highlight-top-ink), 0 30px 60px -34px rgba(0, 0, 0, 0.7); /* A larger panel on ink. */
  /* Sheets: each section a rounded sheet that slides over the one before. */
  --sheet-radius: 44px;
  --sheet-radius-phone: 30px; /* Under 760px. */
  --sheet-overlap: 44px;
  --sheet-overlap-phone: 30px;
  --shadow-sheet: 0 -28px 60px -32px rgba(33, 33, 33, 0.45);
  --shadow-sheet-on-ink: 0 -28px 60px -32px rgba(0, 0, 0, 0.5); /* An ink sheet over a dark one. */
  --shadow-sheet-ink: 0 -1px 0 rgba(239, 235, 225, 0.08), 0 -28px 60px -32px rgba(0, 0, 0, 0.6); /* An ink sheet, with its top edge lit. */
  --lift-card: -4px;
  --header-gap: 12px; /* Above the floating header. */
  --header-inset: 14px; /* Either side of it. */
  --header-row: 64px; /* Its height. */

  /* Depth, the portal's softer tier (Dan, 13 Nov 2026: "more subtle"). About half
     the website's weight; medialize.io keeps the values above. */
  --soft-shadow-card: var(--highlight-top), 0 10px 28px -20px rgba(33, 33, 33, 0.16);
  --soft-shadow-card-hover: var(--highlight-top), 0 0 0 1px rgba(96, 31, 249, 0.18), 0 16px 36px -24px rgba(96, 31, 249, 0.28);
  --soft-shadow-pressable: var(--highlight-pressable), 0 6px 16px -10px rgba(255, 106, 213, 0.5);
  --soft-shadow-pressable-hover: var(--highlight-pressable), 0 8px 20px -10px rgba(255, 106, 213, 0.6);
  --soft-shadow-header: var(--highlight-top), 0 8px 24px -18px rgba(33, 33, 33, 0.18);
  --soft-shadow-ink: var(--highlight-top-ink), 0 12px 30px -22px rgba(0, 0, 0, 0.35);
  --soft-lift: -2px;

  /* Meaning. One cream theme everywhere, like the site. */
  --background: var(--cream);
  --surface: color-mix(in srgb, var(--cream) 45%, white); /* The site's white wash on cream. */
  --surface-border: var(--border);
  --surface-muted: color-mix(in srgb, var(--ink) 5%, transparent);
  --surface-soft: color-mix(in srgb, var(--ink) 5%, transparent);
  --surface-chip: color-mix(in srgb, var(--ink) 9%, transparent);
  --surface-inverse: var(--ink);
  --foreground: var(--ink);
  --foreground-inverse: var(--cream);
  --text-secondary: color-mix(in srgb, var(--ink) 66%, transparent);
  --border: color-mix(in srgb, var(--ink) 14%, transparent);
  --border-input: color-mix(in srgb, var(--ink) 18%, transparent);
  --accent: var(--pink);
  --accent-foreground: var(--ink);
  --accent-text: var(--violet); /* Links and highlighted words on cream. */
  --focus-ring: var(--ink);
  --moment-background: var(--violet-grad);
  --moment-solid: var(--violet);
  --moment-foreground: var(--cream);
  --header-background: color-mix(in srgb, var(--cream) 86%, transparent); /* The site's glass header. */
  --nav-background: var(--background);
  --nav-foreground: var(--foreground);
  --nav-muted: var(--text-secondary);
  --nav-off: color-mix(in srgb, var(--ink) 34%, transparent);
  --nav-active-background: var(--surface-chip);
  --radius-surface: var(--radius-xl);
  /* Depth in the portal (the soft tier): a card at rest, a card you can open on
     hover, the main pink action, the header pill. Ink bands swap the surfaces. */
  --shadow-surface: var(--soft-shadow-card);
  --shadow-surface-hover: var(--soft-shadow-card-hover);
  --shadow-surface-ink: var(--soft-shadow-ink);
  --shadow-surface-ink-hover: var(--soft-shadow-ink);
  --shadow-action: var(--soft-shadow-pressable);
  --shadow-action-hover: var(--soft-shadow-pressable-hover);
  --shadow-header-pill: var(--soft-shadow-header);
  --lift-surface: var(--soft-lift);
}

/* The signed-in app. Same cream theme as the site on every screen size.
   Arc's menus open outside the app (in a portal), so they take its theme too. */
[data-theme="app"],
[data-radix-popper-content-wrapper] {
  color-scheme: light;
}

/* Ink bands, as on the site: a section or card on ink takes these. */
[data-tone="ink"] {
  color-scheme: dark;
  --foreground: var(--cream);
  --foreground-inverse: var(--ink);
  --text-secondary: color-mix(in srgb, var(--cream) 72%, transparent);
  --border: color-mix(in srgb, var(--cream) 16%, transparent);
  --border-input: color-mix(in srgb, var(--cream) 22%, transparent);
  --surface: color-mix(in srgb, var(--cream) 6%, var(--ink));
  --surface-muted: color-mix(in srgb, var(--cream) 6%, transparent);
  --surface-soft: color-mix(in srgb, var(--cream) 6%, transparent);
  --surface-chip: color-mix(in srgb, var(--cream) 14%, transparent);
  --surface-inverse: var(--cream);
  --accent-text: var(--pink);
  --focus-ring: var(--pink);
  --danger: oklch(71% 0.155 8);
  --success: oklch(79% 0.14 162);
  --warning: oklch(77% 0.15 45);
  --info: oklch(79% 0.095 236);
  --shadow-surface: var(--shadow-surface-ink);
  --shadow-surface-hover: var(--shadow-surface-ink-hover);
}

/* Arc's own tokens, pointed at the brand. Arc's foundation.css loads first, so
   these win. Set on every themed element, so they follow the theme there. */
:root,
[data-theme="app"],
[data-tone="ink"],
[data-radix-popper-content-wrapper] {
  --text-muted: var(--text-secondary);
  --border-strong: var(--border-input);
  --border-subtle: color-mix(in srgb, var(--border) 60%, transparent);
  --surface-raised: var(--surface);
  --accent-strong: color-mix(in srgb, var(--pink) 80%, var(--ink));
  --accent-subtle: color-mix(in srgb, var(--pink) 16%, transparent);
  --control-on: var(--accent);
  --control-glyph: var(--accent-foreground);
  --control-thumb-on: var(--cream);
  --control-track: var(--surface-chip);
  --control-track-hover: var(--surface-chip);
  --focus-outline: var(--focus-ring);
  --focus-outline-offset: 3px;
  --radius-panel: var(--radius-md);
  /* Menus and lists that float: as soft as a resting card. */
  --shadow-floating: var(--soft-shadow-card);
}

/* Arc's menus open in a portal: glass, as the site's floating cards. */
[data-radix-popper-content-wrapper] {
  --surface-raised: var(--glass-surface);
}