/* ==========================================================================
   DialHawk Design Tokens, Status: FINAL v1.0 (2026-10-17), light theme
   Pulled from the approved mockups: texting, pr85 settings + opt-in,
   ai-instructions, agent-config-merged, contacts-redesign, mobile-app-hawk.
   Brand source: /workspace/design/brand-assets/DialHawkBrandGuidelines.pdf (it wins over the mockups).
   Replaces v0.2 (/workspace/design/design-tokens.css and the app's
   src/styles/design-tokens.css). The big change from v0.2: the primary action
   is Caller ID Green (#17423B), not red. Red is only for errors, DNC and destructive actions.

   Two layers:
     1. --dh-*  DialHawk tokens. Mockups and dh- classes use these.
     2. shadcn variables (--primary, --border, ...). Mapped onto layer 1 so the
        existing Tailwind classes (bg-primary, border-input, ring-ring) take on
        the mockup look with no markup changes. The app's Tailwind config reads
        them as var(--x), with no hsl() wrapper, so plain hex values work.
   Hard rules: 44px minimum hit target, 13px minimum text, full-screen sheets under 768px.
   ========================================================================== */
:root {
  /* ---- Brand (DialHawkBrandGuidelines.pdf p5, exact hex) --------------
     Primary:   Caller ID Green #17423B, Ringtone Red #EA1B24
     Secondary: Conversation Teal #21BD98, Missed Call Red #961415, Insight Amber #FFB93A
     Neutral:   Dial Depth Blue #0B1421 ("use 75% for secondary text")
     Tints below are the guideline's 75/50/25/10% steps, mixed with white. */
  --dh-green-900: #17423B;   /* Caller ID Green: in-app primary action, selected, links, outbound bubble */
  --dh-green-950: #0F2F2A;   /* primary pressed (shade, for interaction only) */
  --dh-green-75:  #51716C;   /* primary hover */
  --dh-green-50t: #8BA09D;   /* primary disabled fill */
  --dh-green-10:  #E8ECEB;
  --dh-teal-500:  #21BD98;   /* Conversation Teal: unread dot, count pill (navy text), success dot, AI outline. Never text on white, never the focus ring (2.4:1 on white) */
  --dh-teal-25:   #C8EEE5;
  --dh-teal-10:   #E9F8F5;   /* teal 10%: selected row / nav / chip tint, success bg */
  --dh-red-500:   #EA1B24;   /* Ringtone Red: logo, notification dot, danger solid (not a text color under 18px) */
  --dh-red-25:    #FAC6C8;
  --dh-red-10:    #FDE8E9;
  --dh-mred-700:  #961415;   /* Missed Call Red: error text, destructive fill (8.7:1 with white) */
  --dh-mred-800:  #7A1011;   /* destructive hover (shade) */
  --dh-amber-500: #FFB93A;   /* Insight Amber: warning border / accent */
  --dh-amber-25:  #FFEECE;
  --dh-amber-10:  #FFF8EB;
  --dh-amber-fg:  #7A4A12;   /* NOT in the guidelines: amber can't be text on white, so this dark amber is needed for warning text */
  --dh-navy-950:  #0B1421;   /* Dial Depth Blue: body text, dark surfaces */

  /* ---- Neutrals = Dial Depth Blue tints (guideline p5). Replaces the
     mockups' green-tinted grays. "Use 75% for secondary text." */
  --dh-white:     #FFFFFF;
  --dh-gray-25:   #FAFAFB;   /* 2%: thread / message area */
  --dh-gray-50:   #F5F6F6;   /* 4%: page background */
  --dh-gray-100:  #EDEEEF;   /* 7%: row dividers, subtle fill, hover */
  --dh-gray-200:  #E7E8E9;   /* 10% (guideline step): card + panel border */
  --dh-gray-300:  #C2C4C8;   /* 25% (guideline step): input + outline-button border */
  --dh-gray-400:  #858A90;   /* 50% (guideline step): disabled text, placeholder icons. Not body text */
  --dh-gray-500:  #484F58;   /* 75% (guideline step): ALL secondary + meta text, 7.7:1 on page bg */
  --dh-gray-700:  #484F58;   /* alias: the guideline has one secondary text color */
  --dh-gray-900:  #0B1421;

  /* ---- Status (brand colors and their tints only) --------------------- */
  --dh-success-bg:#E9F8F5; --dh-success-border:#C8EEE5; --dh-success-fg:#17423B; --dh-success-solid:#21BD98;
  --dh-warning-bg:#FFF8EB; --dh-warning-border:#FFB93A; --dh-warning-fg:#7A4A12; --dh-warning-solid:#FFB93A;
  --dh-danger-bg: #FDE8E9; --dh-danger-border: #FAC6C8; --dh-danger-fg: #961415; --dh-danger-solid: #EA1B24;
  --dh-info-bg:   #E7E8E9; --dh-info-border:   #C2C4C8; --dh-info-fg:   #0B1421; --dh-info-solid:   #484F58; /* no blue in the brand: Dial Depth Blue tints */
  --dh-neutral-bg:#EDEEEF; --dh-neutral-border:#C2C4C8; --dh-neutral-fg:#484F58; --dh-neutral-solid:#858A90;
  --dh-ai-bg:     #E9F8F5; --dh-ai-border:     #21BD98; --dh-ai-fg:     #17423B; /* AI content: teal outline (the mockups' purple is off-brand) */

  /* ---- Type ----------------------------------------------------------- */
  --dh-font-heading: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --dh-font-body:    "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* size / line-height. No size below 13px, ever. */
  --dh-text-13: 13px; --dh-lh-13: 18px;  /* meta, timestamps, helper, badges, counters */
  --dh-text-14: 14px; --dh-lh-14: 20px;  /* buttons, labels, snippets, notices */
  --dh-text-15: 15px; --dh-lh-15: 22px;  /* body, inputs, bubbles, list names (base) */
  --dh-text-16: 16px; --dh-lh-16: 24px;  /* inputs at 390 (stops iOS zoom), emphasis */
  --dh-text-18: 18px; --dh-lh-18: 24px;  /* card title (DM Sans 700) */
  --dh-text-20: 20px; --dh-lh-20: 26px;  /* dialog title */
  --dh-text-24: 24px; --dh-lh-24: 30px;  /* page title (DM Sans 700) */
  --dh-text-28: 28px; --dh-lh-28: 34px;  /* stat card value (24/30 on phones) */
  --dh-text-32: 32px; --dh-lh-32: 38px;  /* empty-state icon, hero numbers */
  --dh-weight-regular: 400; --dh-weight-medium: 500; --dh-weight-semibold: 600; --dh-weight-bold: 700;
  --dh-overline-tracking: .6px;          /* 13px DM Sans 600 uppercase section labels */

  /* ---- Spacing (4px grid) -------------------------------------------- */
  --dh-space-1: 4px;  --dh-space-2: 8px;  --dh-space-3: 12px; --dh-space-4: 16px;
  --dh-space-5: 20px; --dh-space-6: 24px; --dh-space-8: 32px; --dh-space-10: 40px;

  /* ---- Sizes ---------------------------------------------------------- */
  --dh-tap-min: 44px;        /* every interactive element, desktop and mobile */
  --dh-control-h: 44px;      /* button, input, select, segmented pill */
  --dh-topbar-h: 60px;
  --dh-sidebar-w: 232px;
  --dh-nav-item-h: 44px;     /* the mockup used 40px, raised to 44 */
  --dh-rail-w: 72px;         /* collapsed sidebar (rail) */
  --dh-dot: 10px;            /* unread dot, needs-attention dot */
  --dh-list-pane-w: 380px;   /* inbox / contacts list pane */
  --dh-row-h: 76px;          /* conversation / contact row with 3 lines */
  --dh-row-h-compact: 56px;  /* settings row, one line + meta */
  --dh-avatar: 40px; --dh-avatar-lg: 56px; --dh-avatar-sm: 32px;
  --dh-dialog-w: 520px; --dh-dialog-w-sm: 440px;
  --dh-content-max: 960px;   /* single-column pages: contact, settings, wizard */

  /* ---- Radius --------------------------------------------------------- */
  --dh-radius-sm: 6px;       /* inline code, small tags */
  --dh-radius-md: 10px;      /* buttons, inputs, notices, nav items, radio cards */
  --dh-radius-lg: 14px;      /* cards, split panel, system-line pill */
  --dh-radius-xl: 16px;      /* dialogs, bubbles */
  --dh-radius-tail: 4px;     /* bubble tail corner */
  --dh-radius-pill: 999px;   /* segmented filters, badges, avatars */

  /* ---- Elevation (mostly flat: border first, shadow only for overlays) */
  --dh-shadow-0: none;
  --dh-shadow-topbar: 0 1px 0 #E7E8E9;
  --dh-shadow-1: 0 1px 2px rgba(11,20,33,.06);           /* hoverable card only */
  --dh-shadow-2: 0 4px 12px rgba(11,20,33,.12);          /* menus, popovers, toasts */
  --dh-shadow-3: 0 20px 60px rgba(11,20,33,.25);         /* dialogs */
  --dh-selected-bar: inset 3px 0 0 #17423B;              /* selected row / nav */
  --dh-overlay: rgba(11,20,33,.45);

  /* ---- Focus + motion ------------------------------------------------- */
  --dh-focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #17423B; /* Caller ID Green, 11.2:1 on white. Was teal (2.4:1, failed the 3:1 rule in foundations.md) */
  --dh-ease: cubic-bezier(.2,.8,.2,1); /* = --dh-ease-out, kept as an alias */ --dh-dur-fast: 120ms; --dh-dur: 200ms;


  /* ---- Breakpoints (reference only: CSS vars can't be used in @media).
     phone 390 (design width) · <768 phone layout · 768-1023 tablet · 1024-1439 laptop · >=1440 desktop */
  --dh-bp-tablet: 768px; --dh-bp-laptop: 1024px; --dh-bp-desktop: 1440px;

  /* ---- Grid + page widths -------------------------------------------- */
  --dh-gutter: 24px;          /* page padding >=768 (16px under 768) */
  --dh-gutter-phone: 16px;
  --dh-grid-gap: 16px;        /* 12-col grid gap >=1024, 8-col 768-1023, 4-col under 768 */
  --dh-page-max-list: 1280px; /* list pages, dashboard */
  --dh-page-max-detail: 1120px;/* detail with tabs */
  --dh-page-max-form: 760px;  /* settings, wizard body */
  /* --dh-content-max 960 = contact detail / single column */

  /* ---- Z-index -------------------------------------------------------- */
  --dh-z-base: 0; --dh-z-sticky: 10; --dh-z-topbar: 20; --dh-z-sidebar: 30;
  --dh-z-dropdown: 40; --dh-z-overlay: 50; --dh-z-dialog: 60; --dh-z-toast: 70; --dh-z-tooltip: 80;

  /* ---- Elevation scale (0 flat · 1 hover card · 2 menu/popover/toast · 3 dialog/sheet) */
  --dh-elev-0: none; --dh-elev-1: var(--dh-shadow-1); --dh-elev-2: var(--dh-shadow-2); --dh-elev-3: var(--dh-shadow-3);

  /* ---- Motion --------------------------------------------------------- */
  --dh-dur-instant: 80ms;     /* hover color, press */
  --dh-dur-slow: 280ms;       /* sheet / page push on phone */
  --dh-ease-out: cubic-bezier(.2,.8,.2,1);   /* entering */
  --dh-ease-in: cubic-bezier(.4,0,1,1);      /* leaving */

  /* ---- Charts (brand colors, in this order) --------------------------- */
  --dh-chart-1: #17423B; --dh-chart-2: #21BD98; --dh-chart-3: #FFB93A;
  --dh-chart-4: #961415; --dh-chart-5: #858A90; --dh-chart-6: #8BA09D;
  --dh-chart-grid: #EDEEEF; --dh-chart-axis: #484F58;

  /* ---- Icons (lucide) ------------------------------------------------- */
  --dh-icon-sm: 16px; --dh-icon-md: 20px; --dh-icon-lg: 24px; --dh-icon-stroke: 1.75;

  /* ======================================================================
     shadcn mapping (the app's names). Drop-in for src/index.css :root.
     ====================================================================== */
  --background: var(--dh-gray-50);
  --foreground: var(--dh-navy-950);
  --card: var(--dh-white);              --card-foreground: var(--dh-navy-950);
  --popover: var(--dh-white);           --popover-foreground: var(--dh-navy-950);
  --primary: var(--dh-green-900);       --primary-foreground: var(--dh-white);
  --secondary: var(--dh-white);         --secondary-foreground: var(--dh-navy-950); /* = outline button */
  --muted: var(--dh-gray-100);          --muted-foreground: var(--dh-gray-500);
  --accent: var(--dh-teal-10);         --accent-foreground: var(--dh-green-900);   /* hover/selected tint (was light blue) */
  --destructive: var(--dh-mred-700);     --destructive-foreground: var(--dh-white);
  --border: var(--dh-gray-200);
  --input: var(--dh-gray-300);
  --ring: var(--dh-green-900);          /* focus ring color (see --dh-focus-ring) */
  --radius: 14px;                        /* shadcn base. The preset pins sm 6 / md 10 / lg 14 / xl 16 explicitly */
  --font-heading: var(--dh-font-heading);
  --font-sans: var(--dh-font-body);
  --sidebar: var(--dh-white);           --sidebar-foreground: var(--dh-navy-950);
  --sidebar-primary: var(--dh-green-900); --sidebar-primary-foreground: var(--dh-white);
  --sidebar-accent: var(--dh-teal-10); --sidebar-accent-foreground: var(--dh-green-900);
  --sidebar-border: var(--dh-gray-200); --sidebar-ring: var(--dh-green-900);
  /* The app's elevation shadows are flattened to the mockup's border-first look */
  --shadow-card-default: none; --shadow-card-hover: var(--dh-shadow-1);
  --shadow-button-primary: none; --shadow-button-secondary: none;
  --shadow-modal: var(--dh-shadow-3); --shadow-dropdown: var(--dh-shadow-2);
  --shadow-topbar: var(--dh-shadow-topbar); --shadow-inset-soft: none;
}

/* Inputs: 15px on desktop, 16px on phones (stops iOS from zooming on focus). */
:root { --dh-input-text: 15px; }
@media (max-width: 767px) { :root { --dh-input-text: 16px; } }

/* shadcn chart variables -> brand chart colors */
:root{--chart-1:var(--dh-chart-1);--chart-2:var(--dh-chart-2);--chart-3:var(--dh-chart-3);--chart-4:var(--dh-chart-4);--chart-5:var(--dh-chart-5)}

/* Reduced motion: no slides or fades longer than instant; skeleton shimmer off */
@media (prefers-reduced-motion: reduce){
  :root{--dh-dur:0ms;--dh-dur-fast:0ms;--dh-dur-slow:0ms}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}