@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
/* ============================================================
   Corpline CRM — Design Tokens
   Apple iOS 26 / macOS Tahoe "Liquid Glass"
   Single source of truth. No component may hardcode a value.
   ============================================================ */

:root{
  /* ---- Font ---- */
  /* Plus Jakarta Sans = closest free match to the reference's geometric sans;
     falls back to the system stack if the web font can't load (e.g. offline). */
  --font-sans:"Plus Jakarta Sans",-apple-system,"SF Pro Text","SF Pro Display",
    system-ui,"Helvetica Neue",sans-serif;

  /* ---- Type scale (size / line-height / tracking) ---- */
  --fs-large-title:34px;  --lh-large-title:41px;  --tr-large-title:.37px;
  --fs-title:28px;        --lh-title:34px;        --tr-title:.36px;
  --fs-title2:22px;       --lh-title2:28px;       --tr-title2:-.26px;
  --fs-title3:20px;       --lh-title3:25px;       --tr-title3:-.45px;
  --fs-headline:17px;     --lh-headline:22px;     --tr-headline:-.43px;
  --fs-body:17px;         --lh-body:22px;         --tr-body:-.43px;
  --fs-callout:16px;      --lh-callout:21px;      --tr-callout:-.31px;
  --fs-subhead:15px;      --lh-subhead:20px;      --tr-subhead:-.23px;
  --fs-footnote:13px;     --lh-footnote:18px;     --tr-footnote:-.08px;
  --fs-caption:12px;      --lh-caption:16px;      --tr-caption:0px;

  /* ---- Weights (no Light/Thin, ever) ---- */
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;

  /* ---- Spacing — strict 8pt grid ---- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  --screen-margin:20px;
  --tap-min:44px;

  /* ---- Radii (continuous / squircle-ish) ---- */
  --r-control:10px;
  --r-card:10px;
  --r-group:12px;
  --r-sheet:16px;
  --r-capsule:22px;
  --r-full:999px;

  /* ---- Semantic color: LIGHT (default) ---- */
  --bg:#ffffff;                          /* systemBackground          */
  --bg-secondary:#f2f2f7;                /* secondarySystemBackground */
  --bg-tertiary:#ffffff;                 /* tertiarySystemBackground  */
  --bg-grouped:#f2f2f7;                  /* systemGroupedBackground   */
  --bg-grouped-elevated:#ffffff;         /* grouped cell surface      */

  --label:#000000;                       /* label                     */
  --label-secondary:rgba(60,60,67,.60);  /* secondaryLabel            */
  --label-tertiary:rgba(60,60,67,.30);   /* tertiaryLabel             */
  --label-quaternary:rgba(60,60,67,.18); /* quaternaryLabel           */

  --separator:rgba(60,60,67,.29);        /* separator (hairline)      */
  --separator-opaque:#c6c6c8;            /* opaqueSeparator           */
  --fill-secondary:rgba(120,120,128,.16);/* secondary fill (search)   */
  --fill-tertiary:rgba(118,118,128,.12);

  --accent:#007aff;                      /* systemBlue                */
  --accent-press:#0066d6;
  --accent-soft:rgba(0,122,255,.12);

  --red:#ff3b30;  --green:#34c759;  --orange:#ff9500;
  --yellow:#ffcc00; --teal:#30b0c7; --purple:#af52de;
  --red-soft:rgba(255,59,48,.12);
  --green-soft:rgba(52,199,89,.14);
  --orange-soft:rgba(255,149,0,.14);

  /* ---- Dashboard data accent (app UI only — never in client PDFs) ---- */
  /* violet, Trivi-style (var names kept as --lime* for compatibility)       */
  --lime:#7c6cf0;                 /* soft violet for chips / highlights        */
  --lime-deep:#6354e0;            /* data: lines, bars, progress, ✓            */
  --lime-ink:#ffffff;             /* white text sitting on a violet surface    */
  --lime-soft:rgba(124,108,240,.14);
  --hero-num:#f2f5f2;             /* hero big number — clean off-white          */
  --ink-1:#20242c; --ink-2:#12151b;          /* charcoal gradient tile          */
  /* muted, warm earth-tone gradients (echo the reference's calm palette) */
  --grad-green:linear-gradient(155deg,#39443d 0%,#54645a 55%,#7a9080 100%);
  --grad-amber:linear-gradient(155deg,#3f372f 0%,#665748 55%,#96826d 100%);
  --grad-ink:linear-gradient(155deg,#2b3039 0%,#181c23 100%);
  /* floating depth — layered soft shadows + a bright top edge */
  --float-1:0 1px 2px rgba(0,0,0,.06), 0 8px 18px -8px rgba(0,0,0,.16), 0 24px 44px -16px rgba(0,0,0,.20);
  --float-2:0 2px 4px rgba(0,0,0,.10), 0 12px 26px -8px rgba(0,0,0,.24), 0 34px 60px -20px rgba(0,0,0,.30);
  --float-hover:0 4px 8px rgba(0,0,0,.12), 0 20px 40px -10px rgba(0,0,0,.30), 0 46px 80px -24px rgba(0,0,0,.36);
  --edge-dark:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.04);
  --edge-glass:inset 0 1px 0 rgba(255,255,255,.7);

  /* ---- Liquid Glass material ---- */
  --glass-blur:20px;
  --glass-saturate:180%;
  --glass-fill:rgba(255,255,255,.72);          /* translucent base    */
  --glass-fill-strong:rgba(255,255,255,.86);
  --glass-stroke:rgba(255,255,255,.65);        /* 1px top inner light  */
  --glass-hairline:rgba(0,0,0,.08);            /* bottom edge          */
  --card-glass:rgba(255,255,255,.55);          /* frosted card surface */
  --card-glass-stroke:rgba(255,255,255,.6);
  --card-glass-edge:rgba(255,255,255,.85);     /* bright top rim       */
  --card-dark:rgba(42,46,56,.52);              /* frosted dark card    */
  --card-dark-stroke:rgba(255,255,255,.16);
  --canvas-tint:linear-gradient(180deg,#eef1f6 0%,#e7ebf2 100%);

  /* ---- Shadows — soft, layered, adaptive ---- */
  --shadow-1:0 1px 2px rgba(0,0,0,.05);
  --shadow-2:0 2px 8px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --shadow-glass:0 8px 30px rgba(0,0,0,.10);
  --shadow-sheet:0 24px 70px rgba(0,0,0,.28);

  /* ---- Motion (Apple spring) ---- */
  --motion-fast:.2s;
  --motion:.3s;
  --motion-slow:.45s;
  --ease-spring:cubic-bezier(.32,.72,0,1);     /* sheets / nav push    */
  --ease-standard:cubic-bezier(.4,0,.2,1);
}

/* ---- Semantic color: DARK ---- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#000000;
    --bg-secondary:#1c1c1e;
    --bg-tertiary:#2c2c2e;
    --bg-grouped:#000000;
    --bg-grouped-elevated:#1c1c1e;

    --label:#ffffff;
    --label-secondary:rgba(235,235,245,.60);
    --label-tertiary:rgba(235,235,245,.30);
    --label-quaternary:rgba(235,235,245,.16);

    --separator:rgba(84,84,88,.65);
    --separator-opaque:#38383a;
    --fill-secondary:rgba(120,120,128,.32);
    --fill-tertiary:rgba(118,118,128,.24);

    --accent:#0a84ff;
    --accent-press:#3b9bff;
    --accent-soft:rgba(10,132,255,.22);

    --red:#ff453a; --green:#30d158; --orange:#ff9f0a;
    --red-soft:rgba(255,69,58,.22);
    --green-soft:rgba(48,209,88,.20);
    --orange-soft:rgba(255,159,10,.20);

    --glass-fill:rgba(28,28,30,.66);
    --glass-fill-strong:rgba(28,28,30,.84);
    --glass-stroke:rgba(255,255,255,.12);
  --card-glass:rgba(32,34,42,.55);--card-glass-stroke:rgba(255,255,255,.1);--card-glass-edge:rgba(255,255,255,.14);--card-dark:rgba(32,34,42,.55);--card-dark-stroke:rgba(255,255,255,.12);
    --card-glass:rgba(32,34,42,.55);--card-glass-stroke:rgba(255,255,255,.1);--card-glass-edge:rgba(255,255,255,.14);--card-dark:rgba(32,34,42,.55);--card-dark-stroke:rgba(255,255,255,.12);
    --glass-hairline:rgba(0,0,0,.5);
    --canvas-tint:linear-gradient(180deg,#0c0c0e 0%,#000 100%);

    --shadow-1:0 1px 2px rgba(0,0,0,.5);
    --shadow-2:0 2px 10px rgba(0,0,0,.55);
    --shadow-glass:0 8px 30px rgba(0,0,0,.6);
    --shadow-sheet:0 24px 70px rgba(0,0,0,.7);
    /* dark: depth reads from a deep drop shadow + a lit top edge */
    --float-1:0 10px 26px -10px rgba(0,0,0,.7), 0 30px 56px -22px rgba(0,0,0,.6);
    --float-2:0 14px 34px -10px rgba(0,0,0,.75), 0 40px 70px -26px rgba(0,0,0,.65);
    --float-hover:0 20px 44px -12px rgba(0,0,0,.8), 0 54px 90px -30px rgba(0,0,0,.7);
    --edge-glass:inset 0 1px 0 rgba(255,255,255,.14);
  }
}

/* ---- Manual dark override (theme toggle) ---- */
:root[data-theme="dark"]{
  --bg:#000000;
  --bg-secondary:#1c1c1e;
  --bg-tertiary:#2c2c2e;
  --bg-grouped:#000000;
  --bg-grouped-elevated:#1c1c1e;
  --label:#ffffff;
  --label-secondary:rgba(235,235,245,.60);
  --label-tertiary:rgba(235,235,245,.30);
  --label-quaternary:rgba(235,235,245,.16);
  --separator:rgba(84,84,88,.65);
  --separator-opaque:#38383a;
  --fill-secondary:rgba(120,120,128,.32);
  --fill-tertiary:rgba(118,118,128,.24);
  --accent:#0a84ff;
  --accent-press:#3b9bff;
  --accent-soft:rgba(10,132,255,.22);
  --red:#ff453a; --green:#30d158; --orange:#ff9f0a;
  --red-soft:rgba(255,69,58,.22);
  --green-soft:rgba(48,209,88,.20);
  --orange-soft:rgba(255,159,10,.20);
  --glass-fill:rgba(28,28,30,.66);
  --glass-fill-strong:rgba(28,28,30,.84);
  --glass-stroke:rgba(255,255,255,.12);
  --glass-hairline:rgba(0,0,0,.5);
  --canvas-tint:linear-gradient(180deg,#0c0c0e 0%,#000 100%);
  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 2px 10px rgba(0,0,0,.55);
  --shadow-glass:0 8px 30px rgba(0,0,0,.6);
  --shadow-sheet:0 24px 70px rgba(0,0,0,.7);
  --float-1:0 10px 26px -10px rgba(0,0,0,.7), 0 30px 56px -22px rgba(0,0,0,.6);
  --float-2:0 14px 34px -10px rgba(0,0,0,.75), 0 40px 70px -26px rgba(0,0,0,.65);
  --float-hover:0 20px 44px -12px rgba(0,0,0,.8), 0 54px 90px -30px rgba(0,0,0,.7);
  --edge-glass:inset 0 1px 0 rgba(255,255,255,.14);
}

@media (prefers-reduced-motion:reduce){
  :root{ --motion-fast:0s; --motion:0s; --motion-slow:0s; }
}