/* Tasker 24 — Design Tokens
   Brand-grounded palette, typography, radii, spacing, shadow.
   Maps 1:1 to Flutter ThemeData (light + dark). */

:root {
  /* Brand */
  --t24-navy:       #0B1F3A;
  --t24-deep:       #123A73;
  --t24-blue:       #1E63D6;
  --t24-cyan:       #22D3EE;
  --t24-sky:        #EAF6FF;

  /* Light surface */
  --t24-bg:         #F5FAFF;
  --t24-bg-2:       #EAF2FB;
  --t24-surface:    #FFFFFF;
  --t24-surface-2:  #F8FBFE;
  --t24-text:       #0F172A;
  --t24-muted:      #64748B;
  --t24-border:     #DDEBFA;
  --t24-divider:    #EEF4FB;

  /* Semantic */
  --t24-success:    #16A34A;
  --t24-warning:    #F59E0B;
  --t24-danger:     #DC2626;
  --t24-info:       var(--t24-blue);

  /* Type */
  --t24-font-en: 'Public Sans', 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
  --t24-font-bn: 'Hind Siliguri', 'Noto Sans Bengali', 'SolaimanLipi', sans-serif;

  /* Radii */
  --t24-r-xs: 8px;
  --t24-r-sm: 12px;
  --t24-r-md: 16px;
  --t24-r-lg: 20px;
  --t24-r-xl: 26px;
  --t24-r-2xl: 32px;
  --t24-r-pill: 9999px;

  /* Shadows */
  --t24-sh-1: 0 1px 2px rgba(11,31,58,0.04), 0 1px 1px rgba(11,31,58,0.03);
  --t24-sh-2: 0 4px 10px rgba(11,31,58,0.06), 0 2px 4px rgba(11,31,58,0.04);
  --t24-sh-3: 0 10px 24px rgba(11,31,58,0.08), 0 4px 8px rgba(11,31,58,0.04);
  --t24-sh-4: 0 20px 40px rgba(11,31,58,0.12), 0 8px 16px rgba(11,31,58,0.06);
  --t24-sh-blue: 0 12px 24px rgba(30,99,214,0.28);

  /* Hero gradient */
  --t24-grad-hero: linear-gradient(135deg, #0B1F3A 0%, #123A73 45%, #1E63D6 100%);
  --t24-grad-cyan: linear-gradient(135deg, #1E63D6 0%, #22D3EE 100%);
  --t24-grad-soft: linear-gradient(180deg, #FFFFFF 0%, #EAF6FF 100%);
  --t24-grad-sky:  linear-gradient(160deg, #EAF6FF 0%, #FFFFFF 60%, #DDEBFA 100%);
}

/* Dark theme overrides */
.t24-dark {
  --t24-bg:         #060B17;
  --t24-bg-2:       #0B1428;
  --t24-surface:    #0F1A2E;
  --t24-surface-2: #142340;
  --t24-text:       #E7EEF8;
  --t24-muted:      #8AA0BD;
  --t24-border:     #1B2A48;
  --t24-divider:    #142340;
  --t24-sky:        #122A4A;

  --t24-sh-1: 0 1px 2px rgba(0,0,0,0.35);
  --t24-sh-2: 0 4px 10px rgba(0,0,0,0.45);
  --t24-sh-3: 0 10px 24px rgba(0,0,0,0.5);
  --t24-sh-4: 0 20px 40px rgba(0,0,0,0.6);

  --t24-grad-sky:  linear-gradient(160deg, #0B1428 0%, #0F1A2E 60%, #122A4A 100%);
  --t24-grad-soft: linear-gradient(180deg, #0F1A2E 0%, #122A4A 100%);
}

/* Typography helpers — names match Material 3 / Flutter TextTheme */
.t24-display-l { font-family: var(--t24-font-en); font-weight: 700; font-size: 32px; line-height: 1.12; letter-spacing: -0.5px; }
.t24-title-l   { font-family: var(--t24-font-en); font-weight: 700; font-size: 22px; line-height: 1.2;  letter-spacing: -0.2px; }
.t24-title-m   { font-family: var(--t24-font-en); font-weight: 600; font-size: 17px; line-height: 1.3;  letter-spacing: -0.1px; }
.t24-title-s   { font-family: var(--t24-font-en); font-weight: 600; font-size: 14px; line-height: 1.3; }
.t24-body-l    { font-family: var(--t24-font-en); font-weight: 400; font-size: 15px; line-height: 1.45; }
.t24-body-m    { font-family: var(--t24-font-en); font-weight: 400; font-size: 13px; line-height: 1.45; }
.t24-label-l   { font-family: var(--t24-font-en); font-weight: 600; font-size: 13px; line-height: 1.2;  letter-spacing: 0.2px; }
.t24-caption   { font-family: var(--t24-font-en); font-weight: 500; font-size: 11px; line-height: 1.2;  letter-spacing: 0.3px; text-transform: uppercase; }
.t24-bn        { font-family: var(--t24-font-bn); }

/* Card */
.t24-card { background: var(--t24-surface); border: 1px solid var(--t24-border); border-radius: var(--t24-r-lg); box-shadow: var(--t24-sh-1); }
.t24-card-elev { background: var(--t24-surface); border-radius: var(--t24-r-lg); box-shadow: var(--t24-sh-3); }

/* Chip */
.t24-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--t24-r-pill); background: var(--t24-sky); color: var(--t24-deep); font: 500 12px/1 var(--t24-font-en); border: 1px solid var(--t24-border); }
.t24-chip-solid { background: var(--t24-blue); color: white; border-color: transparent; }

/* Button */
.t24-btn { height: 48px; padding: 0 20px; border-radius: var(--t24-r-md); font: 600 15px/1 var(--t24-font-en); display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; cursor: pointer; transition: transform .08s ease, box-shadow .12s; }
.t24-btn:active { transform: translateY(1px); }
.t24-btn-primary { background: var(--t24-grad-cyan); color: white; box-shadow: var(--t24-sh-blue); }
.t24-btn-secondary { background: var(--t24-surface); color: var(--t24-deep); border: 1.5px solid var(--t24-border); }
.t24-btn-ghost { background: transparent; color: var(--t24-blue); }

/* Input */
.t24-input { height: 48px; padding: 0 16px; border-radius: var(--t24-r-md); background: var(--t24-surface); border: 1.5px solid var(--t24-border); color: var(--t24-text); font: 500 14px/1 var(--t24-font-en); outline: none; width: 100%; box-sizing: border-box; }
.t24-input:focus { border-color: var(--t24-blue); box-shadow: 0 0 0 4px rgba(30,99,214,0.12); }

/* Icon tile (the soft-sky rounded square holding category/service icons) */
.t24-icon-tile { background: var(--t24-sky); border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* App background gradient — for phone interiors */
.t24-app-bg { background: var(--t24-grad-sky); min-height: 100%; }

/* Stat pill (used on dashboard cards) */
.t24-stat-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 11px; font: 600 10px/1 var(--t24-font-en); letter-spacing: 0.2px; }

/* Verified check */
.t24-verified { background: var(--t24-blue); color: white; width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; }