/* ==========================================================================
   CloudTech Automation — Design tokens
   Single source of truth. Nothing below this file should hard-code a colour,
   a font size, or a spacing value.

   Brand hexes are sampled directly from the company logo:
     #0485C3  cyan-blue      wordmark "CLOUD", triangle
     #E05138  vermilion      wordmark "AUTOMATION", swoosh
     #FF6F00  safety orange  robot arm
     #263137  graphite       arm joints / shading
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     1. BRAND
     Raw hexes are for fills, graphics and large display type only.
     None of them reach 4.5:1 on white, so text uses the *-text variants.
     --------------------------------------------------------------------- */
  --brand-primary: #0485c3;
  --brand-primary-hover: #0371a6;
  --brand-primary-text: #036898; /* 6.11:1 on white — links, small text */
  --brand-primary-deep: #02496b; /* headings on light surfaces */
  --brand-primary-wash: #e8f4fb; /* tinted backgrounds */

  --brand-accent: #e05138;
  --brand-accent-hover: #ce3a20;
  --brand-accent-text: #bd351d; /* 5.69:1 on white */
  --brand-accent-deep: #852515;
  --brand-accent-wash: #fdeeeb;

  /* Rationed. The logo's arm colour. Data highlights and the arm motif only —
     never as a second accent, or it reads as an inconsistency next to
     --brand-accent rather than a decision. */
  --brand-signal: #ff6f00;
  --brand-signal-text: #c75700; /* 4.38:1 — large text only */

  /* Third-party reference — Upwork's own brand green. Not part of our
     palette; used only for the "hire via Upwork" badge/link so it reads
     unmistakably as their brand, not ours. */
  --brand-upwork: #14a800;

  /* ---------------------------------------------------------------------
     2. NEUTRAL RAMP
     Anchored on the logo's own graphite (#263137) at ink-700 so dark
     sections sit under the logo without it looking pasted on.
     --------------------------------------------------------------------- */
  --ink-900: #0b0f12;
  --ink-800: #141a1f;
  --ink-700: #263137; /* logo graphite */
  --ink-600: #36474f;
  --ink-500: #4a555e;
  --ink-400: #67737d;
  --ink-300: #8d98a2;
  --ink-200: #b4bcc3;
  --ink-100: #d6dbdf;
  --ink-050: #e9ecee;
  --paper: #f4f6f7; /* RAL 7035 adjacent */
  --white: #ffffff;

  /* Soft washes — used for cursor-lit grounds. Cool is blue-tinted from the
     logo primary, warm is vermilion-tinted. Both stay light. */
  --wash-cool: #e7eef3;
  --wash-cool-deep: #d8e3ea;
  --wash-warm: #f7ece9;

  /* Accent rule — a graded shade rather than flat vermilion. Runs from the
     logo blue through vermilion into signal orange, so the top edge of a
     section carries the whole palette instead of one colour. */
  --rule-accent: linear-gradient(
    90deg,
    #0485c3 0%,
    #8a6a7e 26%,
    #e05138 58%,
    #f0630f 82%,
    #ff6f00 100%
  );
  --rule-accent-soft: linear-gradient(
    90deg,
    rgba(4, 133, 195, 0.55) 0%,
    rgba(224, 81, 56, 0.85) 55%,
    rgba(255, 111, 0, 0.9) 100%
  );

  /* ---------------------------------------------------------------------
     3. SEMANTIC
     Components read these, never the ramps above.
     --------------------------------------------------------------------- */
  --bg: var(--white);
  --bg-alt: var(--paper);
  --bg-inverse: var(--ink-900);
  --bg-inverse-alt: var(--ink-800);

  --surface: var(--white);
  --surface-raised: var(--white);
  --surface-sunken: var(--paper);
  --surface-inverse: var(--ink-800);

  --text: var(--ink-900);
  --text-muted: var(--ink-500);
  --text-faint: var(--ink-400);
  --text-inverse: var(--white);
  --text-inverse-muted: var(--ink-300);
  --text-link: var(--brand-primary-text);

  --border: var(--ink-100);
  --border-strong: var(--ink-200);
  --border-inverse: rgba(255, 255, 255, 0.14);
  --border-inverse-strong: rgba(255, 255, 255, 0.28);

  --focus-ring: var(--brand-accent);
  --focus-ring-inverse: var(--brand-signal);

  /* Status — distinct from brand so an error never reads as a CTA */
  --status-ok: #1c7c54;
  --status-warn: #a8730a;
  --status-err: #b3261e;

  /* ---------------------------------------------------------------------
     4. TYPEFACES
     Archivo   — industrial grotesque, tight tracking, display + headings
     Inter     — neutral grotesque, body copy, high legibility at small sizes
     JetBrains Mono — technical rail: part numbers, standards, I/O counts
     --------------------------------------------------------------------- */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------------------------------------------------------------------
     5. TYPE SCALE — fluid, 320px → 1440px viewport
     --------------------------------------------------------------------- */
  --step--2: clamp(0.694rem, 0.68rem + 0.07vw, 0.72rem);
  --step--1: clamp(0.833rem, 0.81rem + 0.12vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.14rem + 0.3vw, 1.406rem);
  --step-2: clamp(1.44rem, 1.34rem + 0.5vw, 1.758rem);
  --step-3: clamp(1.728rem, 1.57rem + 0.79vw, 2.197rem);
  --step-4: clamp(2.074rem, 1.83rem + 1.22vw, 2.746rem);
  --step-5: clamp(2.488rem, 2.13rem + 1.8vw, 3.433rem);
  --step-6: clamp(2.986rem, 2.46rem + 2.63vw, 4.291rem);
  --step-7: clamp(3.583rem, 2.83rem + 3.77vw, 5.364rem);

  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* Display type is set tight; the mono rail is set wide and uppercase.
     That contrast is the typographic signature. */
  --tracking-display: -0.032em;
  --tracking-heading: -0.022em;
  --tracking-body: -0.006em;
  --tracking-rail: 0.16em;

  /* ---------------------------------------------------------------------
     6. SPACE — 4px base
     --------------------------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;
  --space-5xl: 10rem;

  --section-y: clamp(4rem, 3rem + 5vw, 8rem);
  --gutter: clamp(1.25rem, 0.9rem + 1.8vw, 2.5rem);
  --measure: 68ch;
  --container: 1320px;
  --container-narrow: 880px;

  /* ---------------------------------------------------------------------
     7. RADIUS — deliberately tight. Brief §4 rules out rounded-card look.
     --------------------------------------------------------------------- */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* ---------------------------------------------------------------------
     8. LINES & GRID
     The drawing-sheet motif: hairlines, registration ticks, grid underlay.
     --------------------------------------------------------------------- */
  --hairline: 1px;
  --rule: 2px;
  --tick-len: 10px;
  --grid-size: 32px;
  --grid-line: rgba(38, 49, 55, 0.055);
  --grid-line-inverse: rgba(255, 255, 255, 0.05);

  /* ---------------------------------------------------------------------
     9. ELEVATION — restrained. Industrial surfaces are flat.
     --------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(11, 15, 18, 0.05);
  --shadow-md: 0 4px 16px rgba(11, 15, 18, 0.07);
  --shadow-lg: 0 12px 40px rgba(11, 15, 18, 0.1);

  /* ---------------------------------------------------------------------
     10. MOTION
     --------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap: cubic-bezier(0.2, 0, 0, 1);

  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;
  --dur-reveal: 900ms;

  --stagger: 70ms;

  /* ---------------------------------------------------------------------
     11. LAYERS
     --------------------------------------------------------------------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-nav: 200;
  --z-overlay: 300;
  --z-modal: 400;
}

/* ==========================================================================
   Inverse context
   Any section that opts into the dark ground remaps semantics rather than
   overriding component styles one by one.
   ========================================================================== */
[data-theme="inverse"] {
  --bg: var(--ink-900);
  --bg-alt: var(--ink-800);
  --surface: var(--ink-800);
  --surface-raised: var(--ink-700);
  --surface-sunken: var(--ink-900);

  --text: var(--white);
  --text-muted: var(--ink-300);
  --text-faint: var(--ink-400);
  --text-link: #5cb8e8;

  --border: var(--border-inverse);
  --border-strong: var(--border-inverse-strong);
  --focus-ring: var(--focus-ring-inverse);

  --grid-line: var(--grid-line-inverse);
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}

/* ==========================================================================
   Reduced motion — brief §5 and §20
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-reveal: 1ms;
    --stagger: 0ms;
  }
}