/* ==========================================================================
   arkodeep.com design tokens
   Ship only tokens the site actually renders. No chart, sidebar, or scaffold
   tokens. Every value below is used somewhere.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- type ------------------------------------------------------------ */
  --font-sans: 'Hanken Grotesk', 'Hanken Grotesk Fallback', system-ui, sans-serif;
  --font-display: 'Instrument Serif', 'Instrument Serif Fallback', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, monospace;

  --text-xs: 0.75rem;    --lh-xs: 1.3333;
  --text-sm: 0.875rem;   --lh-sm: 1.4286;
  --text-base: 1rem;     --lh-base: 1.5;
  --text-lg: 1.125rem;   --lh-lg: 1.5556;
  --text-xl: 1.25rem;    --lh-xl: 1.4;
  --text-2xl: 1.5rem;    --lh-2xl: 1.3333;
  --text-3xl: 1.875rem;  --lh-3xl: 1.2;
  --text-4xl: 2.25rem;   --lh-4xl: 1.1111;
  --text-5xl: 3rem;      --lh-5xl: 1;

  --tracking-tight: -0.025em;
  --tracking-wider: 0.05em;

  /* --- light surfaces --------------------------------------------------- */
  --background: #f9f9f9;
  --foreground: #100f0f;
  --card: #f9f9f9;
  --muted: #f5f5f5;
  --muted-foreground: #737373;
  /* One honest supporting-text colour, named rather than reached by overriding
     a semantic token with a hardcoded hex. It is the same in both themes. */
  --secondary-text: #909092;
  --border: #e5e5e5;
  --input: #e5e5e5;
  --ring: #a1a1a1;
  --primary: #171717;
  --primary-foreground: #fafafa;

  /* --- the entire chromatic budget -------------------------------------- */
  --available: #00c758;
  --available-border: #7bf1a8;
  --available-fill: rgba(0, 199, 88, 0.1);
  --portrait-backdrop: #90c5ff;
  --highlight: rgba(255, 210, 54, 0.55);

  /* --- geometry ---------------------------------------------------------- */
  --radius: 0.45rem;
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);

  --spacing: 0.25rem;
  --container: 42rem;
  --header-h: 3.5rem;

  /* --- motion ------------------------------------------------------------ */
  --dur-fast: 0.15s;
  --dur-base: 0.2s;
  --dur-slow: 0.35s;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-exit: 0.15s;
  --duration-enter: 0.21s;
  --duration-move: 0.4s;
}

/* Dark is not an inversion. Page and card separate, and borders become
   white-alpha so a hairline reads the same over any surface. */
:root[data-theme='dark'] {
  color-scheme: dark;

  --background: #100f0f;
  --foreground: #fafafa;
  --card: #171717;
  --muted: #262626;
  --muted-foreground: #a1a1a1;
  --secondary-text: #909092;
  --border: rgba(255, 255, 255, 0.1);
  --input: rgba(255, 255, 255, 0.15);
  --ring: #737373;
  --primary: #d4d4d4;
  --primary-foreground: #171717;

  --available-border: #00a544;
  --portrait-backdrop: #ffe02a;
  --highlight: rgba(252, 187, 0, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --background: #100f0f;
    --foreground: #fafafa;
    --card: #171717;
    --muted: #262626;
    --muted-foreground: #a1a1a1;
    --secondary-text: #909092;
    --border: rgba(255, 255, 255, 0.1);
    --input: rgba(255, 255, 255, 0.15);
    --ring: #737373;
    --primary: #d4d4d4;
    --primary-foreground: #171717;

    --available-border: #00a544;
    --portrait-backdrop: #ffe02a;
    --highlight: rgba(252, 187, 0, 0.35);
  }
}