/* Coolco customer PWA - tokens and shared pieces, matching the Lovable template (chat-whisperer-958-main/src/styles.css + components/coolco.tsx).
   Light theme only, as designed. Tailwind scale used by the template: radius-xl 18px, 2xl 22px, 3xl 26px; text-xs 12, sm 14, lg 18, 2xl 24, 3xl 30, 4xl 36. */
@font-face{font-family:Manrope;font-weight:200 800;font-style:normal;font-display:swap;src:url('../fonts/manrope-latin.woff2') format('woff2')}
@font-face{font-family:Sora;font-weight:100 800;font-style:normal;font-display:swap;src:url('../fonts/sora-latin.woff2') format('woff2')}

:root{
  color-scheme:light;
  --background:#f4f9fd;--foreground:#0f2236;--card:#fff;
  --primary:#0079c1;--primary-foreground:#fbfdff;--primary-soft:#dbeefc;
  --secondary:#eef4f9;--muted:#eef4f9;--muted-foreground:#5c6b7d;--accent:#9fe0ec;
  --success:#177a55;--success-soft:#ddf5e8;--warning:#8f5a0b;--warning-soft:#fdf0d2;--star:#d98a1c;
  --destructive:#c2301f;--border:#dde7ef;--ring:#0079c1;
  --r-xl:18px;--r-2xl:22px;--r-3xl:26px;
  --gradient-hero:linear-gradient(160deg,#0060b0,#0aa0c0 60%,#5cc8d4);
  --shadow-card:0 1px 2px rgba(15,60,110,.06),0 8px 24px -12px rgba(15,60,110,.18);
  --shadow-elevated:0 20px 40px -20px rgba(0,96,176,.45);
  --font-body:Manrope,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-head:Sora,ui-sans-serif,system-ui,sans-serif;
}
@supports (color:oklch(50% .1 200)){
  :root{
    --background:oklch(98.2% .008 230);--foreground:oklch(24% .04 245);
    --primary:oklch(56% .15 240);--primary-foreground:oklch(99% .005 230);--primary-soft:oklch(94% .04 235);
    --secondary:oklch(95.5% .015 230);--muted:oklch(95.5% .012 230);--muted-foreground:oklch(52% .03 245);--accent:oklch(88% .08 200);
    --success:oklch(50% .12 160);--success-soft:oklch(94% .05 160);--warning:oklch(48% .1 65);--warning-soft:oklch(95% .05 80);--star:oklch(66% .15 65);
    --destructive:oklch(52% .2 25);--border:oklch(91% .015 235);--ring:oklch(56% .15 240);
    --gradient-hero:linear-gradient(160deg,oklch(50% .15 245),oklch(62% .13 215) 60%,oklch(78% .1 200));
    --shadow-card:0 1px 2px oklch(40% .05 240/.06),0 8px 24px -12px oklch(40% .08 240/.18);
    --shadow-elevated:0 20px 40px -20px oklch(45% .15 240/.45);
  }
}

*,*::before,*::after{box-sizing:border-box;border-color:var(--border)}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--background);color:var(--foreground);font:16px/1.5 var(--font-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,dl,dd,ul,ol{margin:0}
h1,h2,h3{font-family:var(--font-head);font-size:inherit;font-weight:inherit;letter-spacing:-.02em;line-height:1.25}
ul,ol{padding:0;list-style:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:var(--primary);text-decoration:none}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.muted{color:var(--muted-foreground)} .small{font-size:12px;line-height:16px}
.center{text-align:center}

/* logo (Logo in coolco.tsx): 36px mark, 18px Sora bold */
.brand{display:flex;align-items:center;gap:8px;font:700 18px/28px var(--font-head);color:var(--foreground)}
.brand-mark{width:36px;height:36px;border-radius:var(--r-xl);background:var(--primary);color:var(--primary-foreground);display:grid;place-items:center;flex:none}
.brand-mark svg{width:20px;height:20px}
.on-hero,.on-hero .brand{color:var(--primary-foreground)}
.on-hero .brand-mark{background:rgba(251,253,255,.2)}

/* buttons: btn.primary / btn.outline / btn.ghost */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 20px;border-radius:var(--r-xl);border:1px solid var(--border);background:var(--card);color:var(--foreground);font-size:14px;line-height:20px;font-weight:600;text-align:center;transition:background .15s,opacity .15s}
.btn:hover{background:var(--secondary)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--primary-foreground);box-shadow:var(--shadow-elevated)}
.btn.primary:hover{opacity:.9;background:var(--primary)}
.btn:disabled,.btn.disabled{opacity:.5;cursor:default;box-shadow:none}
.btn svg{width:20px;height:20px}
.link{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--r-xl);color:var(--primary);font-size:14px;line-height:20px;font-weight:600}
.link:hover{background:var(--primary-soft)}
.link:disabled{color:var(--muted-foreground);cursor:default;background:none}
.link.plain{padding:0}

/* chips: text-xs, bold, tracking-wide */
.chip{display:inline-flex;align-items:center;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.025em;padding:2px 10px;border-radius:999px;white-space:nowrap;background:var(--muted);color:var(--muted-foreground)}
.chip.active{background:var(--success-soft);color:var(--success)}
.chip.upcoming{background:var(--primary-soft);color:var(--primary)}
.chip.warn,.chip.draft{background:var(--warning-soft);color:var(--warning)}

/* icon tiles: rounded-xl, primary-soft */
.icon-tile{width:40px;height:40px;border-radius:var(--r-xl);background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;flex:none}
.icon-tile svg{width:20px;height:20px}
.btn>span{display:inline-grid;place-items:center}

/* form fields: input in coolco.tsx = rounded-xl border bg-card px-4 py-3 text-sm */
.field,input.field,textarea.field{width:100%;padding:12px 16px;border:1px solid var(--border);border-radius:var(--r-xl);background:var(--card);font-size:14px;line-height:20px;outline:none}
.field:focus{outline:2px solid var(--ring);outline-offset:0}
.field::placeholder{color:var(--muted-foreground);opacity:.8}