/* ============================================================
   FAVORED · INTERNAL TOOLS · TOKENS
   Drop-in design tokens for tool landing pages embedded in
   Twenty via iframe. Restrained editorial — Favored color
   used sparingly as accent, mono eyebrows for labels, ink
   chrome on a neutral near-white canvas.

   Pair with components.css for primitives.
   Read CLAUDE.md for rules of engagement.
   ============================================================ */

/* ---------- Webfonts ----------
   Display = Figtree (hero numerics, big titles)
   UI/Body = DM Sans (everything that reads)
   Mono    = JetBrains Mono (eyebrows, metrics, IDs)
*/
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800;900&family=DM+Sans:ital,opsz,wght@0,9..40,400..800;1,9..40,400..800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  /* ============================================================
     COLOR — Warm neutral chrome, cherry as accent.
     Tools are light by default. Use color for:
       · Status (success/warning/danger)
       · Brand moments (cherry CTAs, "live" pings)
       · Data-viz tagging (each service-line gets one color)
     Never use color decoratively on body chrome.
     ============================================================ */

  /* Brand anchors — never theme over these */
  --brand-cherry:    #FF2E55;
  --brand-ink:       #1F1A1A;
  --brand-petal:     #FFF6F0;

  /* Neutral ramp — warm. Use --ink/--ink-2/--ink-3 for text,
     --surface family for backgrounds. */
  --ink:             #1F1A1A;   /* primary text, headings */
  --ink-2:           #3B2822;   /* secondary text, labels */
  --ink-3:           #5C534D;   /* body subtle, descriptive */
  --ink-4:           #8F857D;   /* captions, metadata, eyebrows */
  --ink-5:           #B8AFA7;   /* placeholder, disabled */

  --line:            #E7DCD1;   /* hairline divider */
  --line-2:          #D8CBBE;   /* stronger divider */
  --line-ink:        var(--ink);/* heavy editorial rule */

  --surface:         #FAFAF9;   /* canvas — neutral, near-white */
  --surface-2:       #FFFFFF;   /* raised card on canvas */
  --surface-3:       #F2F1EF;   /* tinted alt row / subtle bg — neutral */
  --surface-4:       #ECEBE8;   /* section background — neutral */
  --surface-inverse: #1F1A1A;   /* dark band */

  /* Semantic — text + bg roles, the only ones tool code
     should reference for chrome. */
  --fg:              var(--ink);
  --fg-muted:        var(--ink-3);
  --fg-subtle:       var(--ink-4);
  --fg-inverse:      var(--surface);
  --fg-inverse-muted:  rgba(255,246,240,.6);
  --fg-inverse-subtle: rgba(255,246,240,.38);

  --bg:              var(--surface);
  --bg-raised:       var(--surface-2);
  --bg-subtle:       var(--surface-3);
  --bg-section:      var(--surface-4);
  --bg-inverse:      var(--surface-inverse);
  --line-inverse:    rgba(255,246,240,.14);

  /* Accent — cherry. Use sparingly: primary CTA, focus ring,
     "active" tab/state, the ONE thing the eye should land on. */
  --accent:          var(--brand-cherry);
  --accent-fg:       #FFFFFF;
  --accent-soft:     #FFE3EA;
  --accent-soft-fg:  #9F1430;
  --accent-hot:      #E8224A;   /* pressed */
  --accent-line:     #FFB6C4;   /* mid-strength tint — softer than accent, more present than accent-soft */

  /* State colors — prefer these over raw hex for any feedback. */
  --success:         #4A8F3F;   --success-soft:#E1F0D9;
  --warning:         #D98F1E;   --warning-soft:#FFF0D4;
  --danger:          #C41A3B;   --danger-soft:#FFDCE3;
  --info:            #4A6FB5;   --info-soft:#DCE6F7;

  /* Tagging palette — for data-viz, service-line chips, KPI dots.
     Pick from this set; do not invent new hues. Soft variants are for
     tinted chip backgrounds (icon chips, category tags); line variants
     are a mid-strength tint for borders — softer than the full tag
     color, more present than the soft fill. */
  --tag-cherry:      #FF2E55;
  --tag-pink:        #FF8DA1;
  --tag-tang:        #FF9D5C;   --tag-tang-soft:  #FFEADC;   --tag-tang-line:  #FFDDC6;
  --tag-sun:         #FFD23F;   --tag-sun-soft:   #FFF7DA;   --tag-sun-line:   #F2D8B0;
  --tag-grass:       #7ED957;   --tag-grass-soft: #E7F8DF;   --tag-grass-line: #D2F2C4;
  --tag-sky:         #6FCBDC;   --tag-sky-soft:   #E3F6F9;   --tag-sky-line:   #CDEDF3;
  --tag-grape:       #A06CD5;   --tag-grape-soft: #F2E7FA;   --tag-grape-line: #DECCF0;

  /* ============================================================
     TYPE
     Display = Figtree (hero numerics, big titles)
     UI/Body = DM Sans (everything that reads)
     Mono    = JetBrains Mono (eyebrows, metric values, IDs)
     ============================================================ */
  --font-display:    'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:       'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:       'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Type scale — prefer named steps over raw px. */
  --t-2xs:   10px;
  --t-xs:    11px;
  --t-sm:    13px;
  --t-base:  14px;   /* body default — tools are dense */
  --t-md:    16px;
  --t-lg:    18px;
  --t-xl:    22px;
  --t-2xl:   28px;
  --t-3xl:   36px;
  --t-4xl:   48px;
  --t-5xl:   64px;
  --t-hero:  96px;   /* hero stat only */

  --lh-tight:  0.95;
  --lh-snug:   1.15;
  --lh-normal: 1.45;
  --lh-loose:  1.6;

  --wt-reg:    400;
  --wt-med:    500;
  --wt-semi:   600;
  --wt-bold:   700;
  --wt-black:  800;

  --tr-tight:  -0.025em;   /* headings */
  --tr-snug:   -0.015em;   /* sub-heads */
  --tr-0:       0;
  --tr-wide:    0.06em;
  --tr-wider:   0.18em;    /* eyebrows, labels */

  /* ============================================================
     SPACING — 4px base. Use named steps; avoid arbitrary px.
     Tools are denser than marketing pages.
     ============================================================ */
  --s-0:   0;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-7:   32px;
  --s-8:   40px;
  --s-9:   48px;
  --s-10:  64px;
  --s-11:  80px;
  --s-12:  96px;

  /* Page rhythm */
  --page-pad-x:   24px;     /* iframe lives inside Twenty padding */
  --page-pad-y:   24px;
  --page-max-w:   1280px;   /* dashboards stop here on wide screens */
  --section-gap:  var(--s-9);

  /* ============================================================
     RADIUS — softer than the marketing decks.
     ============================================================ */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   10px;     /* default for buttons, inputs */
  --r-lg:   14px;     /* cards */
  --r-xl:   18px;     /* large surfaces */
  --r-pill: 999px;
  --r-full: 50%;

  /* ============================================================
     BORDER + SHADOW — restrained.
     Use --sh-1 for cards, --sh-2 only for raised/floating surfaces.
     Never stack shadows decoratively.
     ============================================================ */
  --border:        1px solid var(--line);
  --border-2:      1px solid var(--line-2);
  --border-ink:    1px solid var(--ink);
  --border-accent: 1px solid var(--accent);

  --sh-0: none;
  --sh-1: 0 1px 0 rgba(31,26,26,.04), 0 1px 2px rgba(31,26,26,.06);
  --sh-2: 0 2px 4px rgba(31,26,26,.05), 0 4px 12px rgba(31,26,26,.08);
  --sh-3: 0 6px 16px rgba(31,26,26,.08), 0 12px 32px rgba(31,26,26,.12);
  --sh-focus: 0 0 0 3px rgba(255,46,85,.35);

  /* ============================================================
     MOTION
     ============================================================ */
  --dur-xs:  90ms;
  --dur-sm:  160ms;
  --dur-md:  260ms;
  --dur-lg:  400ms;

  --ease-standard: cubic-bezier(.2, .7, .2, 1);
  --ease-out:      cubic-bezier(.2, .7, .2, 1);
  --ease-in:       cubic-bezier(.55, .05, .77, .2);
  --ease-spring:   cubic-bezier(.34, 1.56, .64, 1);

  /* ============================================================
     LAYOUT TOKENS
     ============================================================ */
  --tabs-h:         44px;     /* sub-nav tabs height */
  --kpi-h:          120px;    /* KPI tile baseline */

  /* Z-index */
  --z-base:     1;
  --z-sticky:   100;
  --z-dropdown: 200;
  --z-modal:    1000;
  --z-toast:    2000;
}

/* ============================================================
   RESET — minimal, opinionated.
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ background:var(--bg); }
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-sans);
  font-size:var(--t-base);
  line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; border:0; background:0; padding:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; }
input,select,textarea{ font:inherit; color:inherit; }
hr{ border:0; border-top:var(--border); margin:var(--s-7) 0; }

::selection{ background:var(--accent-soft); color:var(--accent-soft-fg); }

/* Focus ring — applied to the tab key, not mouse clicks. */
:focus{ outline:none; }
:focus-visible{
  outline:none;
  box-shadow:var(--sh-focus);
  border-radius:var(--r-sm);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}