/* ===== Padelio design tokens (copied from your app) ===== */

[data-theme="light"] {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;
  --primary: 221 83% 53%;
  --primary-foreground: 0 0% 100%;
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;
  --destructive: 0 72.22% 50.59%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 240 5% 64.9%;
  --radius: 0.5rem;
}

[data-theme="dark"]{
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 221 83% 53%;
    --primary-foreground: 0 0% 100%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 85.7% 97.3%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
  }

/* ===== Global look & typography ===== */

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
}
#c-header img{
border-radius: 5px;
}


/* Links */
a {
  color: hsl(var(--primary));
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
text-underline-offset: 5px;
}

.text-header {
font-weight: 700
}

/* ===== Buttons (generic) ===== */

button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: none;
  border-radius: 9999px; /* pill */
  padding: 0.5rem 1.25rem;
  font-weight: 600;
  cursor: pointer;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
  filter: brightness(0.95);
}

button:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.p-home__welcome-col button {
   background-color: hsl(var(--primary)) !important; 
   color: white;
   box-shadow: 0 1px 3px 0 hsl(var(--primary));
}



/* Secondary / muted buttons if Fider uses <button> with .secondary, etc.
   (safe shallow selectors – adjust class names if you see different ones) */
button.secondary,
input.secondary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}

/* ===== Inputs & textareas ===== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
  background-color: hsl(var(--card));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
}

input::placeholder,
textarea::placeholder {
  color: hsl(var(--muted-foreground));
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 1px;
}

/* ===== Cards / suggestion items ===== */

/* Very generic “card” styling – if it’s too broad, tighten it later using real classes */
article,
section,
div[role="listitem"] {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}

/* ===== Header & footer (shallow) ===== */

header {
  background-color: hsl(var(--background));
  border-bottom: 1px solid hsl(var(--border));
}

footer {
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground));
}

/* ===== Tags / status chips (very minimal) ===== */

/* If Fider uses small badge elements, this will make them pill-shaped.
   You can later refine using specific badge/status classes from DevTools. */
.badge,
label,
small {
  border-radius: 9999px;
}