/* TONITE design tokens. Every colour, font, radius and shadow lives here: retheme in this one file.
   No other CSS, JS or SVG file contains a colour value. */
@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800;900&family=DM+Mono:wght@400;500&family=Hanken+Grotesk:wght@400;500;600;700&display=swap");

:root {
  color-scheme: dark;

  /* Neutrals */
  --color-bg: #0c0c0e;
  --color-surface: #141417;
  --color-surface-2: #1c1c20;
  --color-surface-3: #27272c;
  --color-border: #303036;
  --color-text: #f4f4f2;
  --color-text-muted: #9a9aa1;
  --white: #ffffff;
  --black: #000000;

  /* PLACEHOLDER: brand colour TBD. Change these and the whole product follows. */
  --accent: #f4f4f2;
  --accent-strong: #ffffff;
  --accent-deep: #8c8c93;
  --on-accent: #0c0c0e;
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-glow: transparent;

  /* The main flat colour, used sparingly for small details. */
  --highlight: #ea5143;
  --on-highlight: #0c0c0e;
  /* Two supporting colours, for small details only. */
  --highlight-2: #6f8bff;
  --highlight-3: #19c9a3;

  /* Status */
  --color-danger: #e5675c;
  --color-success: #8fbf9f;
  --color-live: #e5484d;
  --color-overlay: color-mix(in srgb, var(--black) 72%, transparent);

  /* Glass */
  --glass: color-mix(in srgb, var(--color-surface) 72%, transparent);
  --glass-strong: color-mix(in srgb, var(--color-bg) 86%, transparent);
  --glass-border: color-mix(in srgb, var(--white) 10%, transparent);
  --hairline: color-mix(in srgb, var(--white) 16%, transparent);

  /* The sky behind the landing page: flat tones from night to morning */
  --sky-dusk-top: #0c0c0e;
  --sky-dusk-mid: #121215;
  --sky-dusk-low: #1a1a1f;
  --sky-glow: #222227;
  --sky-dawn-mid: #1c1c21;
  --sky-dawn-low: #2a2a30;
  --sun-core: #f4f4f2;
  --sun-mid: #f4f4f2;
  --sun-edge: #f4f4f2;
  --star: #cfcfd4;

  /* Objects on the landing page */
  --ball-1: #2a2a2f;
  --ball-2: #3d3d43;
  --ball-3: #5c5c64;
  --ball-4: #8c8c93;
  --ball-5: #bdbdc3;
  --ball-6: #f4f4f2;
  --ball-core: #161619;
  --ball-shade: #0c0c0e;
  --metal-light: #d6d6da;
  --metal-mid: #8c8c93;
  --metal-dark: #4a4a50;
  --skyline: #08080a;
  --window-warm: #bdbdc3;
  --window-pale: #f4f4f2;
  --paper: #f4f4f2;
  --paper-ink: #141417;

  /* Filter applied to landing photos. "none" shows them in their real colours. */
  --photo-filter: none;
  --photo-tint: transparent;

  /* Generated avatars. White text passes contrast on all of them. */
  --avatar-1: #8c3b4a;
  --avatar-2: #8a4a2b;
  --avatar-3: #74591c;
  --avatar-4: #4f6b2c;
  --avatar-5: #2c6e55;
  --avatar-6: #1f6a73;
  --avatar-7: #2b5f8a;
  --avatar-8: #44569a;
  --avatar-9: #5f4a9a;
  --avatar-10: #7d4390;
  --avatar-11: #8e3f73;
  --avatar-12: #5c5c66;
  --avatar-text: var(--white);

  /* Fallback banners, when a Nite has no picture */
  --banner-a: #222227;
  --banner-b: #18181b;

  /* Fonts */
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Fluid type */
  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
  --text-2xl: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: clamp(72px, 10vw, 128px);

  /* Shadows */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --glow: none;

  /* Layout */
  --content-max-width: 680px;
  --site-max-width: 1240px;
  --sidebar-width: 264px;
  --sidebar-collapsed: 76px;
  --side-panel-width: 320px;
  --tap-size: 44px;
  --tabbar-height: 64px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-snap: cubic-bezier(0.3, 1.5, 0.5, 1);
  --duration: 200ms;
}

/* Animated gradient borders need a typed angle. */
@property --spin {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}