/* ============================================
   Ops Hub — Studio SaaS Design Tokens
   Extracted from: static/prototypes/proto-3b-studio-saas.html
   Aesthetic: Swiss-minimal / Apple-clean, enriched pills.
   Single source of truth for all visual values. Every hex that
   appears in the prototype is captured here as a token.
   ============================================ */

:root {
  /* ----------------------------------------
     Typography — font families
     Geist (sans) + Geist Mono, both weights 300–700.
     ---------------------------------------- */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;

  /* ----------------------------------------
     Color — neutrals (warm paper ramp)
     The white canvas dominates; color is reserved for pills/flags/dots.
     ---------------------------------------- */

  /* Surfaces */
  --bg: #f7f6f3;            /* page background — warm paper */
  --surface: #ffffff;       /* card / panel background */
  --surface-2: #f1efea;     /* recessed surface — pill fill, seg track, hover */

  /* Borders */
  --border: #e7e3db;        /* default card / divider border */
  --border-soft: #ececea;   /* faint internal dividers (task list top, date rule) */
  --border-strong: #d7d2c8; /* hover border, dashed edit-week pill */

  /* Pure values used directly in the prototype */
  --white: #ffffff;         /* avatar text, btn-primary text, status pill fill */
  --black: #000000;         /* ::selection text */

  /* Text ramp (warm near-black → light) */
  --ink-900: #0e0d0c;       /* headings, place names, primary emphasis */
  --ink-800: #1b1a18;       /* body text default */
  --ink-600: #726d65;       /* navlink rest, secondary pill text */
  --ink-400: #9b958c;       /* muted labels, dates, crew names, due chip */
  --ink-300: #c8c2b8;       /* faintest text, checkbox border, strikethrough */

  /* ----------------------------------------
     Color — accent (blue)
     ---------------------------------------- */
  --accent: #3a5bd9;        /* primary accent — checked checkbox fill */
  --accent-strong: #2c49bd; /* active navlink text, add-task hover, bottomnav active */
  --accent-soft: #e7ecfb;   /* active navlink background, work-type tint */

  /* ----------------------------------------
     Color — soft tint hues (the pink/lavender family)
     These are the "drained near-white" hero-band duotone gradients,
     keyed per trip type. Paper dominates; the hue is a faint key only.
     Owner specifically loves the pink/lavender (shoot) and rose tints —
     captured precisely here as the gradient stop pairs.
     ---------------------------------------- */

  /* Shoot — lavender / soft violet */
  --tint-shoot-1: #f7f2fc;  /* hero--shoot gradient start (lightest lavender) */
  --tint-shoot-2: #f0e8fb;  /* hero--shoot gradient end (soft lavender) */

  /* Work — soft periwinkle blue */
  --tint-work-1: #f3f5fd;   /* hero--work gradient start */
  --tint-work-2: #e9eefc;   /* hero--work gradient end */

  /* Vacation — soft mint / sage */
  --tint-vacation-1: #f1f9f5; /* hero--vacation gradient start */
  --tint-vacation-2: #e6f4ee; /* hero--vacation gradient end */

  /* Transit — soft sand / cream */
  --tint-transit-1: #fbf6ec; /* hero--transit gradient start */
  --tint-transit-2: #f7eed9; /* hero--transit gradient end */

  /* ----------------------------------------
     Color — trip TYPE (foreground + soft pill background tint)
     Used by the type pill and keyed to the hero band.
     ---------------------------------------- */
  --type-shoot: #7a3ec9;    --type-shoot-bg: #f1e9fb;    /* violet on soft lavender */
  --type-vacation: #1f8a6d; --type-vacation-bg: #e1f4ee; /* green on soft mint */
  --type-transit: #b5740a;  --type-transit-bg: #fbf0db;  /* amber-brown on soft sand */
  --type-work: #3a5bd9;     --type-work-bg: #e7ecfb;     /* blue on soft periwinkle */

  /* ----------------------------------------
     Color — deal-funnel STATUS (dot + label)
     discussing → planned → verbal yes → dates locked → villa locked → post-production
     ---------------------------------------- */
  --st-grey: #9b958c;       /* discussing */
  --st-slate: #8493b8;      /* planned (desaturated blue-grey, distinct from dates-locked blue) */
  --st-amber: #b5740a;      /* verbal yes */
  --st-blue: #3a5bd9;       /* dates locked */
  --st-green: #1f8a6d;      /* villa locked */
  --st-purple: #7a3ec9;     /* post-production */

  /* ----------------------------------------
     Color — PLATFORM brand accents
     Used ONLY to tint a platform icon (reach count pills + link chips), never a
     fill or a status. A separate vocabulary from the six-hue semantic palette
     (type/status/priority/people); muted so the canvas stays calm — a splash of
     brand recognition on the glyph, not a poster.
     ---------------------------------------- */
  --pf-instagram: #c13584;  /* instagram magenta */
  --pf-youtube: #d33a2c;    /* youtube red (muted, distinct from prio-high) */
  --pf-x: #1b1a18;          /* X near-black */
  --pf-tiktok: #11a8b5;     /* tiktok teal */
  --pf-linkedin: #1666c0;   /* linkedin blue */
  --pf-facebook: #1877f2;   /* facebook blue */
  --pf-website: #726d65;    /* neutral globe (= ink-600) */
  --pf-chatgpt: #10a37f;    /* ChatGPT/OpenAI green (AI-chat-export source badge) */
  --pf-claude: #d97757;     /* Claude coral (AI-chat-export source badge) */

  /* ----------------------------------------
     Color — PRIORITY (task flag glyph)
     ---------------------------------------- */
  --prio-high: #c0392b;     /* high — red */
  --prio-med: #b5740a;      /* medium — amber-brown */
  --prio-low: #9b958c;      /* low — grey */

  /* Due / urgent — urgent due chips reuse the high-priority red */
  --due: #9b958c;           /* normal due chip text (= ink-400) */
  --due-urgent: #c0392b;    /* urgent due chip text (= prio-high) */

  /* ----------------------------------------
     Color — people (crew avatar fills)
     ---------------------------------------- */
  --p-liam: #3a5bd9;        /* blue */
  --p-shaan: #7a3ec9;       /* violet */
  --p-emil: #1f8a6d;        /* green */
  --p-jake: #b5740a;        /* amber-brown */

  /* ----------------------------------------
     Shadows
     ---------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(27, 26, 24, 0.05);
  --shadow-md: 0 2px 8px rgba(27, 26, 24, 0.07);
  --shadow-lg: 0 18px 44px -20px rgba(27, 26, 24, 0.28), 0 4px 14px -8px rgba(27, 26, 24, 0.1);

  /* Flag image hairline rings (sit on top of imagery, kept as raw-value tokens) */
  --flag-ring: 0 0 0 0.5px rgba(0, 0, 0, 0.1);   /* loc pill + archive row flag */
  --flag-ring-soft: 0 0 0 0.5px rgba(0, 0, 0, 0.08); /* hero flag */

  /* Overlays (raw rgba, like the frost/sheen already used in components.css) */
  --scrim: rgba(27, 26, 24, 0.4);                  /* modal backdrop */
  --hero-photo-scrim: rgba(0, 0, 0, 0.72);         /* dark bottom wash so the white headline + sub-line pop over a photo hero */
  --ink-inverse-soft: rgba(255, 255, 255, 0.82);   /* secondary text on a photo/dark hero (the sub-line) */

  /* ----------------------------------------
     Spacing scale (rem-based, matching prototype usage)
     ---------------------------------------- */
  --sp-1: 0.25rem;   /* 4px */
  --sp-2: 0.4rem;    /* ~6px — pill gap */
  --sp-3: 0.5rem;    /* 8px */
  --sp-4: 0.75rem;   /* 12px */
  --sp-5: 0.9rem;    /* ~14px */
  --sp-6: 1rem;      /* 16px */
  --sp-7: 1.25rem;   /* 20px — grid gap, mobile view pad */
  --sp-8: 1.5rem;    /* 24px — sidebar pad */
  --sp-9: 1.75rem;   /* 28px — view-head margin */
  --sp-10: 2rem;     /* 32px — view horizontal pad */
  --sp-12: 2.25rem;  /* 36px — view top pad */

  /* ----------------------------------------
     Radii
     ---------------------------------------- */
  --r-sm: 6px;       /* pills, hero flag chip, mobile mark, small chips */
  --r-md: 10px;      /* navlink, seg track, desktop mark, buttons */
  --r-lg: 14px;      /* trip card, archive trip row */
  --r-full: 999px;   /* status pill */

  /* ----------------------------------------
     Typography — size scale
     (rem values exactly as used in the prototype)
     ---------------------------------------- */
  --text-3xs: 0.55rem;  /* avatar initials */
  --text-2xs: 0.62rem;  /* section labels, due/note chips, sidebar date, status pill */
  --text-xs: 0.66rem;   /* status label, mobile mark, profile sub */
  --text-sm: 0.7rem;    /* pill text */
  --text-md: 0.74rem;   /* crew names */
  --text-base: 0.78rem; /* seg option, btn-primary, add-task */
  --text-lg: 0.82rem;   /* btn-primary, profile name */
  --text-tasktitle: 0.78rem; /* task title (also attendee name) */
  --text-xl: 0.9rem;    /* navlink */
  --text-2xl: 0.95rem;  /* sidebar name, archive place */
  --text-3xl: 1.05rem;  /* mobile topbar title */
  --text-place: 1.25rem; /* mobile hero place */
  --text-hero: 1.45rem; /* hero place name */
  --text-h2: 1.9rem;    /* view-head h2 */

  /* Typography — weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Typography — letter-spacing / tracking */
  --tracking-tightest: -0.03em; /* view-head h2 */
  --tracking-tighter: -0.025em; /* hero place */
  --tracking-tight: -0.01em;    /* place names, sidebar name */
  --tracking-snug: -0.005em;    /* task title */
  --tracking-normal: 0;
  --tracking-mono: 0.01em;      /* sidebar mark, avatar */
  --tracking-status: 0.02em;    /* status pill mono */
  --tracking-date: 0.04em;      /* sidebar date mono */
  --tracking-label: 0.16em;     /* section label uppercase mono */

  /* Line heights */
  --leading-tight: 1.08;  /* hero place */
  --leading-snug: 1.25;   /* profile block */
  --leading-body: 1.5;    /* body default */

  /* ----------------------------------------
     Transitions
     ---------------------------------------- */
  --ease-fast: 0.06s ease;          /* btn active press */
  --ease-default: 0.14s ease;       /* navlink, seg, button, add-task hover */
  --ease-task: 0.16s ease;          /* task hover, checkbox */
  --ease-card: 0.3s ease;           /* archive row hover */
  --ease-spring: 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); /* trip card hover lift */
  --ease-reveal: 0.65s cubic-bezier(0.2, 0.7, 0.2, 1); /* load reveal */

  /* ----------------------------------------
     Layout
     ---------------------------------------- */
  --sidebar-w: 220px;       /* desktop sidebar width */
  --view-max: 1240px;       /* main view max width */
  --bottomnav-h: 60px;      /* mobile bottom nav height (excl. safe area) */
  --hero-h: 200px;          /* trip card hero min-height (aspect-ratio 16:9 governs the real height) */
  --board-col-w: 410px;     /* kanban board column width (desktop) — wider so task titles get room */
  --research-panel-w: 420px; /* founder-research run panel: right slide-out rail width */
  --breakpoint-md: 720px;   /* sidebar appears, 2-col grid */
  --breakpoint-lg: 1100px;  /* 3-col grid */

  /* ----------------------------------------
     Color — SYSTEM KIND (Build Hub System Map nodes)
     One hue per system kind. Aliased onto existing semantic hues where one
     fits; new raw hex lives here and only here. Cytoscape reads these via
     getComputedStyle (canvas styles can't use var()), so every node color
     must resolve from a token. The three literal hexes coincide with the
     platform-accent family but stay decoupled on purpose: a brand-color
     change must not move a node color.
     ---------------------------------------- */
  --sys-repo: var(--accent);            /* blue — code */
  --sys-database: var(--st-green);      /* green — data at rest */
  --sys-edge-function: var(--st-amber); /* amber — serverless compute */
  --sys-site: #11a8b5;                  /* teal — public surfaces */
  --sys-app: var(--st-purple);          /* violet — product apps */
  --sys-agent: #c13584;                 /* magenta — AI agents */
  --sys-service: var(--st-slate);       /* slate — backend services */
  --sys-integration: #1666c0;           /* deep blue — third-party glue */
  --sys-other: var(--st-grey);          /* grey — uncategorized */

  /* Process map node kinds (portal plan 06). On-brand siblings of --sys-*, each a
     reference to an existing palette token (zero raw hex). */
  --proc-platform: var(--sys-service);    /* slate — a tool/system the founder uses */
  --proc-step: var(--accent);             /* blue — an action in the flow */
  --proc-decision: var(--st-amber);       /* amber — a branch point */
  --proc-data-store: var(--sys-database); /* green — where data lives */
  --proc-event: var(--st-purple);         /* violet — a start/end event (trigger/ending pill) */

  /* System Map layout */
  --sysmap-canvas-h: 560px;             /* desktop canvas height */

  /* Business-finance reconciler: account/card brand hues + cashflow direction.
     Wise is green, ANZ (Airpoints Visa Platinum) reads platinum-silver. Cashflow
     reuses the status palette: inflow green (--st-green), outflow red (--prio-high). */
  --acct-wise: #1f8a6d;                 --acct-wise-bg: #e1f4ee;
  --acct-anz: #5b6675;                  --acct-anz-bg: #edeff2;
  --cash-in: #1f8a6d;                   /* inflow (= --st-green) */
  --cash-out: #c0392b;                  /* outflow (= --prio-high) */
}