/* HiKids ships one typeface: Inter (Google Fonts), weights 400/500/600/700/800.
   Source: web/src/app/layout.tsx + templates/base.html both load Inter from Google Fonts.
   No local font binaries exist in the source repo, so the webfont is loaded from Google. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

@font-face{font-family:"Inter Fallback";src:local("Inter"),local("Inter-Regular"),local("system-ui");font-weight:400 800;font-display:swap}
/* Base palette — copied verbatim from web/src/app/globals.css @theme + DESIGN.md */
:root{
  /* Brand — indigo/royal purple. The digital translation of the logo's purple badge. */
  --color-brand-50:#eef2ff;--color-brand-100:#e0e7ff;--color-brand-200:#c7d2fe;--color-brand-300:#a5b4fc;--color-brand-400:#818cf8;--color-brand-500:#6366f1;--color-brand-600:#4f46e5;--color-brand-700:#4338ca;--color-brand-800:#3730a3;--color-brand-900:#312e81;--color-brand-950:#1e1b4b;

  /* Accent — amber/gold. The logo's gold wordmark + "English School" ribbon. */
  --color-accent-50:#fffbeb;--color-accent-100:#fef3c7;--color-accent-200:#fde68a;--color-accent-300:#fcd34d;--color-accent-400:#fbbf24;--color-accent-500:#f59e0b;--color-accent-600:#d97706;--color-accent-700:#b45309;--color-accent-800:#92400e;--color-accent-900:#78350f;

  /* Semantic — success / warning / danger / info */
  --color-success-50:#f0fdf4;--color-success-100:#dcfce7;--color-success-200:#bbf7d0;--color-success-500:#22c55e;--color-success-600:#16a34a;--color-success-700:#15803d;
  --color-warning-50:#fffbeb;--color-warning-100:#fef3c7;--color-warning-200:#fde68a;--color-warning-500:#f59e0b;--color-warning-600:#d97706;--color-warning-700:#b45309;--color-warning-800:#92400e;
  --color-danger-50:#fef2f2;--color-danger-100:#fee2e2;--color-danger-200:#fecaca;--color-danger-300:#fca5a5;--color-danger-500:#ef4444;--color-danger-600:#dc2626;--color-danger-700:#b91c1c;
  --color-info-50:#eff6ff;--color-info-100:#dbeafe;--color-info-500:#3b82f6;--color-info-600:#2563eb;--color-info-700:#1d4ed8;

  /* Neutral — Tailwind gray scale, used for every surface and text tone */
  --color-gray-50:#f9fafb;--color-gray-100:#f3f4f6;--color-gray-200:#e5e7eb;--color-gray-300:#d1d5db;--color-gray-400:#9ca3af;--color-gray-500:#6b7280;--color-gray-600:#4b5563;--color-gray-700:#374151;--color-gray-800:#1f2937;--color-gray-900:#111827;
  --color-white:#ffffff;

  /* Portal-only avatar gradients (portal/page.tsx child cards, cycled by index) */
  --grad-child-1:linear-gradient(to bottom right,var(--color-brand-500),var(--color-brand-700));/* @kind color */
  --grad-child-2:linear-gradient(to bottom right,var(--color-accent-500),#ea580c);/* @kind color */
  --grad-child-3:linear-gradient(to bottom right,#10b981,#0d9488);/* @kind color */
  --grad-child-4:linear-gradient(to bottom right,#ec4899,#e11d48);/* @kind color */
}
/* Semantic aliases — the names components should reference. */
:root{
  /* Text */
  --text-strong:var(--color-gray-900);
  --text-body:var(--color-gray-700);
  --text-muted:var(--color-gray-500);
  --text-subtle:var(--color-gray-400);
  --text-inverse:var(--color-white);
  --text-brand:var(--color-brand-700);
  --text-on-brand:var(--color-white);
  --text-link:var(--color-brand-600);
  --text-link-hover:var(--color-brand-700);

  /* Surfaces */
  --surface-app:var(--color-gray-50);
  --surface-card:var(--color-white);
  --surface-sunken:var(--color-gray-50);
  --surface-muted:var(--color-gray-100);
  --surface-overlay:rgb(0 0 0 / .5);
  --surface-header:rgb(255 255 255 / .8);
  --surface-sidebar:linear-gradient(to bottom,var(--color-brand-800),var(--color-brand-950));
  --surface-brand-panel:linear-gradient(to bottom right,var(--color-brand-700),var(--color-brand-800) 50%,var(--color-brand-950));
  --surface-portal:linear-gradient(to bottom right,rgb(238 242 255 / .5),var(--color-white),rgb(255 251 235 / .3));

  /* Borders */
  --border-subtle:var(--color-gray-100);
  --border-default:var(--color-gray-200);
  --border-input:var(--color-gray-300);
  --border-focus:var(--color-brand-500);
  --border-on-dark:rgb(255 255 255 / .1);

  /* Interactive — primary (brand) */
  --action-primary-bg:var(--color-brand-600);
  --action-primary-bg-hover:var(--color-brand-700);
  --action-primary-bg-active:var(--color-brand-800);
  --action-primary-fg:var(--color-white);
  /* Interactive — accent (gold; reserved for "Gerar Mensalidades"-class actions) */
  --action-accent-bg:var(--color-accent-500);
  --action-accent-bg-hover:var(--color-accent-600);
  --action-accent-fg:var(--color-white);
  /* Interactive — secondary / ghost / danger */
  --action-secondary-bg:var(--color-white);
  --action-secondary-bg-hover:var(--color-gray-50);
  --action-secondary-bg-active:var(--color-gray-100);
  --action-secondary-fg:var(--color-gray-700);
  --action-ghost-fg:var(--color-gray-600);
  --action-ghost-bg-hover:var(--color-gray-100);
  --action-danger-bg:var(--color-danger-600);
  --action-danger-bg-hover:var(--color-danger-700);
  --action-success-bg:var(--color-success-600);
  --action-success-bg-hover:var(--color-success-700);

  /* Focus ring — 2px brand at 20% alpha, border turns brand-500 */
  --focus-ring:0 0 0 2px rgb(99 102 241 / .2);

  /* Sidebar (dark surface) */
  --sidebar-item-fg:var(--color-brand-200);
  --sidebar-item-fg-hover:var(--color-white);
  --sidebar-item-bg-hover:rgb(255 255 255 / .1);
  --sidebar-item-bg-active:rgb(255 255 255 / .15);
  --sidebar-label-fg:var(--color-brand-400);

  /* Charge status — the six states of a cobrança */
  --status-paid-bg:var(--color-success-50);--status-paid-fg:var(--color-success-700);--status-paid-dot:var(--color-success-500);
  --status-pending-bg:var(--color-warning-50);--status-pending-fg:var(--color-warning-600);--status-pending-dot:var(--color-warning-500);
  --status-overdue-bg:var(--color-danger-50);--status-overdue-fg:var(--color-danger-700);--status-overdue-dot:var(--color-danger-500);
  --status-partial-bg:var(--color-info-50);--status-partial-fg:var(--color-info-700);--status-partial-dot:var(--color-info-500);
  --status-canceled-bg:var(--color-gray-100);--status-canceled-fg:var(--color-gray-500);--status-canceled-dot:var(--color-gray-400);
  --status-exempt-bg:var(--color-brand-50);--status-exempt-fg:var(--color-brand-700);--status-exempt-dot:var(--color-brand-500);

  /* Grade rubric (portal, activity grades) */
  --grade-iniciante-bg:var(--color-gray-100);--grade-iniciante-fg:var(--color-gray-700);--grade-iniciante-bd:var(--color-gray-200);
  --grade-desenvolvimento-bg:#fffbeb;--grade-desenvolvimento-fg:#b45309;--grade-desenvolvimento-bd:#fde68a;
  --grade-consolidado-bg:#ecfdf5;--grade-consolidado-fg:#047857;--grade-consolidado-bd:#a7f3d0;
  --grade-avancado-bg:#eef2ff;--grade-avancado-fg:#4338ca;--grade-avancado-bd:#c7d2fe;
}
/* Type scale — DESIGN.md "Typography". One family: Inter. */
:root{
  --font-sans:"Inter","Inter Fallback",system-ui,-apple-system,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  --text-display-size:2.25rem;--text-display-line:2.5rem;--text-display-weight:800;
  --text-h1-size:1.875rem;--text-h1-line:2.25rem;--text-h1-weight:700;
  --text-h2-size:1.5rem;--text-h2-line:2rem;--text-h2-weight:700;
  --text-h3-size:1.25rem;--text-h3-line:1.75rem;--text-h3-weight:600;
  --text-h4-size:1.125rem;--text-h4-line:1.5rem;--text-h4-weight:600;
  --text-body-size:.875rem;--text-body-line:1.25rem;--text-body-weight:400;
  --text-body-sm-size:.8125rem;--text-body-sm-line:1.125rem;--text-body-sm-weight:400;
  --text-caption-size:.75rem;--text-caption-line:1rem;--text-caption-weight:500;
  --text-micro-size:.6875rem;--text-micro-line:1rem;--text-micro-weight:600;
  --text-overline-size:.625rem;--text-overline-line:.75rem;--text-overline-weight:700;--text-overline-tracking:.1em;

  --weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-extrabold:800;
}
/* 4px base grid — DESIGN.md "Spacing" */
:root{
  --space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;

  /* Component padding recipes (verbatim from DESIGN.md + the shipped pages) */
  --pad-button-x:16px;--pad-button-y:8px;
  --pad-button-compact-x:12px;--pad-button-compact-y:6px;
  --pad-card:24px;--pad-card-compact:20px;
  --pad-input-x:12px;--pad-input-y:10px;
  --pad-modal:24px;
  --pad-table-cell-x:20px;--pad-table-cell-y:12px;
  --pad-sidebar-item-x:12px;--pad-sidebar-item-y:10px;

  /* Control heights */
  --control-h-sm:32px;--control-h-md:40px;--control-h-lg:48px;--control-h-auth:44px;
}
/* Radii — DESIGN.md. Note the shipped app writes these as literal px: rounded-[8px], rounded-[12px], rounded-[16px]. */
:root{
  --radius-xs:4px;   /* badges, tags, kbd */
  --radius-sm:8px;   /* inputs, buttons */
  --radius-md:12px;  /* nav items, icon buttons, alerts */
  --radius-lg:16px;  /* cards, panels, modals */
  --radius-xl:24px;  /* hero/brand blocks, portal cards */
  --radius-full:9999px;
}
/* Elevation — DESIGN.md "Shadows". Cards pair a soft shadow WITH a 1px gray-100 border. */
:root{
  --shadow-sm:0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow-md:0 4px 6px -1px rgb(0 0 0 / .07),0 2px 4px -2px rgb(0 0 0 / .05);
  --shadow-lg:0 10px 15px -3px rgb(0 0 0 / .08),0 4px 6px -4px rgb(0 0 0 / .04);
  --shadow-xl:0 20px 25px -5px rgb(0 0 0 / .1),0 8px 10px -6px rgb(0 0 0 / .04);
  --shadow-inner:inset 0 2px 4px 0 rgb(0 0 0 / .05);
  --blur-header:blur(4px);/* @kind other */
  --blur-overlay:blur(4px);/* @kind other */
  --blur-portal-header:blur(12px);/* @kind other */
}
/* Motion — DESIGN.md "Motion". Short, functional, no bounce in production surfaces. */
:root{
  --duration-instant:75ms;/* @kind other */
  --duration-fast:150ms;/* @kind other */
  --duration-normal:200ms;/* @kind other */
  --duration-slow:300ms;/* @kind other */
  --ease-default:cubic-bezier(.4,0,.2,1);/* @kind other */
  --ease-in:cubic-bezier(.4,0,1,1);/* @kind other */
  --ease-out:cubic-bezier(0,0,.2,1);/* @kind other */
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);/* @kind other */
  --transition-control:all var(--duration-fast) var(--ease-default);/* @kind other */
  --transition-card:all var(--duration-normal) var(--ease-default);/* @kind other */
  /* Card hover lift, used on KPI cards and portal child cards */
  --lift-card:translateY(-2px);/* @kind other */
}
/* Layout constants — DESIGN.md "Page Layouts" + Responsive Breakpoints */
:root{
  --sidebar-w:256px;
  --sidebar-w-collapsed:72px;
  --header-h:64px;         /* app page header */
  --header-h-portal:56px;  /* portal sticky header (legacy 56 / Next 64) */
  --max-w-content:1280px;
  --max-w-portal:480px;
  --max-w-portal-wide:672px; /* portal/page.tsx uses max-w-2xl */
  --bp-sm:640px;--bp-md:768px;--bp-lg:1024px;--bp-xl:1280px;--bp-2xl:1536px;
}
/* Minimal element defaults matching web/src/app/globals.css body rule. */
body{font-family:var(--font-sans);background-color:var(--surface-app);color:var(--text-strong);-webkit-font-smoothing:antialiased}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover);text-decoration:underline}
*,*::before,*::after{box-sizing:border-box}