/* ============================================================
   CYROCK.AI - Cortex design tokens
   CSS custom properties. Import once at the root of your app.

     <link rel="stylesheet" href="tokens/tokens.css">

   Light is the default. Add data-theme="dark" to any element
   (usually <html>) to switch that subtree to the dark theme.
   ============================================================ */

:root {
  /* --- palette: azure (brand) --- */
  --cy-azure-50:  #ECF7FC;
  --cy-azure-100: #CFEBF8;
  --cy-azure-200: #A2D9F0;
  --cy-azure-300: #63C1E7;
  --cy-azure-400: #38BDF8; /* Sky */
  --cy-azure-500: #0D99D9; /* Brand azure - primary */
  --cy-azure-600: #0B7FB8; /* Interactive / fills */
  --cy-azure-700: #0A6A9B; /* Azure text & links on light (AA) */
  --cy-azure-800: #08526F;
  --cy-azure-900: #073B4F;

  /* --- palette: ink & neutrals --- */
  --cy-ink:       #0A2540; /* Primary text */
  --cy-slate-700: #33475B;
  --cy-slate-500: #5A7186; /* Muted text */
  --cy-slate-400: #7E90A1;
  --cy-slate-300: #9DB0BF;
  --cy-slate-200: #C7D3DD;
  --cy-slate-100: #E4EBF0; /* Borders */
  --cy-mist:      #F2F8FD; /* Tinted surface */
  --cy-white:     #FFFFFF;

  /* --- palette: navy (dark theme) --- */
  --cy-navy-700:  #0E3350;
  --cy-navy-850:  #08243B;
  --cy-navy-900:  #071B2E;

  /* --- semantic --- */
  --cy-success: #0F9D58;
  --cy-warning: #E0A94A;
  --cy-danger:  #D64545;
  --cy-info:    #0B7FB8;

  /* --- typography --- */
  --cy-font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --cy-font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --cy-font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --cy-weight-regular: 400;
  --cy-weight-medium: 500;
  --cy-weight-semibold: 600;
  --cy-weight-bold: 700;
  --cy-weight-extrabold: 800;

  --cy-text-display: 48px;
  --cy-text-h1: 36px;
  --cy-text-h2: 28px;
  --cy-text-h3: 22px;
  --cy-text-h4: 18px;
  --cy-text-body-lg: 18px;
  --cy-text-body: 16px;
  --cy-text-small: 14px;
  --cy-text-caption: 12px;

  --cy-leading-tight: 1.1;
  --cy-leading-snug: 1.3;
  --cy-leading-normal: 1.6;
  --cy-tracking-tight: -0.02em;
  --cy-tracking-wide: 0.08em;

  /* --- spacing --- */
  --cy-space-2xs: 4px;
  --cy-space-xs: 8px;
  --cy-space-sm: 12px;
  --cy-space-md: 16px;
  --cy-space-lg: 24px;
  --cy-space-xl: 32px;
  --cy-space-2xl: 48px;
  --cy-space-3xl: 64px;
  --cy-space-4xl: 96px;

  /* --- radius --- */
  --cy-radius-sm: 6px;
  --cy-radius-md: 10px;
  --cy-radius-lg: 14px;
  --cy-radius-xl: 20px;
  --cy-radius-pill: 999px;

  /* --- shadow --- */
  --cy-shadow-sm: 0 1px 2px rgba(10,37,64,0.06);
  --cy-shadow-md: 0 4px 12px rgba(10,37,64,0.08);
  --cy-shadow-lg: 0 16px 40px -12px rgba(10,37,64,0.18);

  /* --- motion --- */
  --cy-duration-fast: 120ms;
  --cy-duration-base: 180ms;
  --cy-duration-slow: 240ms;
  --cy-duration-slower: 480ms;   /* scroll / element reveals */
  --cy-duration-recall: 900ms;   /* the node-graph "recall" draw-in */
  --cy-duration-ambient: 14s;    /* ambient background drift & pulse cadence */
  --cy-easing-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --cy-ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);  /* draws & reveals; decelerates hard */

  /* ---------- semantic roles: LIGHT (default) ---------- */
  --cy-bg: var(--cy-white);
  --cy-bg-muted: var(--cy-mist);
  --cy-surface: var(--cy-white);
  --cy-text: var(--cy-ink);
  --cy-text-muted: var(--cy-slate-500);
  --cy-border: var(--cy-slate-100);
  --cy-brand: var(--cy-azure-500);
  --cy-action: var(--cy-azure-600);
  --cy-action-hover: var(--cy-azure-700);
  --cy-link: var(--cy-azure-700);
  --cy-on-brand: var(--cy-white);
  --cy-focus-ring: rgba(13,153,217,0.45);
  --cy-ring: 0 0 0 3px var(--cy-focus-ring);   /* the standard 3px focus ring */

  /* --- graph motif (decoration; outside the 60/30/10 accent budget) ----------
     The node-graph made into design language: faint hairline edges and nodes that
     echo the mark. Kept low-alpha so it whispers rather than adds "more azure".
     Non-text, so exempt from AA text-contrast; see docs/color.md & docs/motion.md. */
  --cy-graph-edge:        color-mix(in srgb, var(--cy-azure-500) 20%, transparent);
  --cy-graph-node:        var(--cy-azure-500);
  --cy-graph-node-strong: var(--cy-azure-400);   /* active / near-cursor node */
  --cy-glow-azure:        0 0 24px -4px rgba(13,153,217,0.35);
  --cy-gradient-mesh:
    radial-gradient(90% 90% at 88% -8%,  color-mix(in srgb, var(--cy-brand) 12%, transparent), transparent 55%),
    radial-gradient(70% 70% at 6% 108%,  color-mix(in srgb, var(--cy-brand) 7%,  transparent), transparent 60%);
}

/* ---------- semantic roles: DARK ---------- */
[data-theme="dark"] {
  --cy-bg: var(--cy-navy-850);
  --cy-bg-muted: var(--cy-navy-900);
  --cy-surface: var(--cy-navy-700);
  --cy-text: #EAF4FB;
  --cy-text-muted: #8CA6BC;
  --cy-border: rgba(234,244,251,0.12);
  --cy-brand: var(--cy-azure-400);
  --cy-action: var(--cy-azure-400);
  --cy-action-hover: #7FD3FB;
  --cy-link: var(--cy-azure-400);
  --cy-on-brand: var(--cy-navy-900);
  --cy-focus-ring: rgba(56,189,248,0.5);

  /* graph motif - richer on navy: the field reads as a faint constellation with glow */
  --cy-graph-edge:        color-mix(in srgb, var(--cy-azure-400) 28%, transparent);
  --cy-graph-node:        var(--cy-azure-400);
  --cy-graph-node-strong: #7FD3FB;
  --cy-glow-azure:        0 0 28px -2px rgba(56,189,248,0.55);
  --cy-gradient-mesh:
    radial-gradient(90% 90% at 88% -8%,  color-mix(in srgb, var(--cy-brand) 18%, transparent), transparent 55%),
    radial-gradient(70% 70% at 6% 108%,  color-mix(in srgb, var(--cy-brand) 12%, transparent), transparent 60%);
}