/* Educação Criativa — CSS unificado para publicação */

/* ===== tokens/fonts.css ===== */
/* Educação Criativa — Webfonts
   SUBSTITUTION: no brand font files were provided. These Google Fonts are a
   best-guess match to the logo's heavy, rounded wordmark. Baloo 2 mirrors the
   friendly, geometric-heavy display character; Nunito Sans keeps body copy warm
   and legible; JetBrains Mono handles code/labels. Swap for real brand fonts
   when available. */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,600;0,6..12,700;0,6..12,800;1,6..12,400&family=JetBrains+Mono:wght@400;500;700&display=swap');


/* ===== tokens/colors.css ===== */
/* Educação Criativa — Color tokens
   Derived from the logo: golden yellow (#F1CF00) on ink black (#101010).
   The yellow is the hero; ink neutrals carry structure and type.
   Supporting "subject" accents (sky/coral/grass) are an INTENTIONAL EXTENSION
   for categorizing content — used sparingly, never as page-level fills. */
:root {
  /* --- Brand yellow scale --- */
  --yellow-50:  #FEFBE6;
  --yellow-100: #FCF4B8;
  --yellow-200: #FAE977;
  --yellow-300: #F7DC3D;
  --yellow-400: #F1CF00; /* brand primary */
  --yellow-500: #D6B700;
  --yellow-600: #A88F00;
  --yellow-700: #7A6800;

  /* --- Ink (warm near-black) neutral scale --- */
  --ink-900: #101010; /* brand black */
  --ink-800: #1D1D1A;
  --ink-700: #2E2E29;
  --ink-600: #48473F;
  --ink-500: #6B6A5F;
  --ink-400: #94938A;
  --ink-300: #C2C1B7;
  --ink-200: #E4E3D9;
  --ink-100: #F2F1E9;
  --ink-50:  #FAF9F3;
  --white:   #FFFFFF;

  /* --- Subject accents (extension) --- */
  --sky-100:   #DDF0FB;
  --sky:       #2E9BD6;
  --sky-600:   #1F79AC;
  --coral-100: #FCE2DC;
  --coral:     #F0563A;
  --coral-600: #C63E26;
  --grass-100: #DFF1DC;
  --grass:     #4CA64C;
  --grass-600: #3A8038;

  /* --- Semantic status --- */
  --success: #4CA64C;
  --warning: #F1CF00;
  --danger:  #F0563A;
  --info:    #2E9BD6;

  /* --- Semantic aliases --- */
  --color-bg:            var(--ink-50);
  --color-surface:       var(--white);
  --color-surface-sunken:var(--ink-100);
  --color-ink:           var(--ink-900);
  --color-ink-soft:      var(--ink-600);
  --color-ink-muted:     var(--ink-400);
  --color-border:        var(--ink-200);
  --color-border-strong: var(--ink-900);

  --color-primary:       var(--yellow-400);
  --color-primary-hover: var(--yellow-500);
  --color-primary-ink:   var(--ink-900); /* text/icons on yellow */

  --color-on-ink:        var(--ink-50);  /* text on ink surfaces */
  --color-focus-ring:    var(--yellow-400);

  --color-link:          var(--sky-600);
  --color-link-hover:    var(--ink-900);
}


/* ===== tokens/typography.css ===== */
/* Educação Criativa — Typography tokens */
:root {
  --font-display: 'Baloo 2', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (1.25 major-third, rem) */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg:   1.25rem;   /* 20 */
  --text-xl:   1.5625rem; /* 25 */
  --text-2xl:  1.953rem;  /* 31 */
  --text-3xl:  2.441rem;  /* 39 */
  --text-4xl:  3.052rem;  /* 49 */
  --text-5xl:  3.815rem;  /* 61 */

  /* Weights */
  --fw-regular: 400;      /* @kind other */
  --fw-semibold: 600;     /* @kind other */
  --fw-bold: 700;         /* @kind other */
  --fw-display: 700;      /* @kind other */
  --fw-display-heavy: 800;/* @kind other */

  /* Line heights */
  --lh-tight: 1.05;   /* @kind other */
  --lh-snug: 1.2;     /* @kind other */
  --lh-normal: 1.5;   /* @kind other */
  --lh-relaxed: 1.65; /* @kind other */

  /* Letter spacing */
  --tracking-tight: -0.01em; /* @kind other */
  --tracking-normal: 0;      /* @kind other */
  --tracking-wide: 0.04em;   /* @kind other */
  --tracking-caps: 0.08em;   /* @kind other */
}


/* ===== tokens/spacing.css ===== */
/* Educação Criativa — Spacing & layout tokens (4px base grid) */
:root {
  --space-0: 0;
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 2.5rem;   /* 40 */
  --space-8: 3rem;     /* 48 */
  --space-9: 4rem;     /* 64 */
  --space-10: 6rem;    /* 96 */

  --container-sm: 640px;
  --container-md: 900px;
  --container-lg: 1140px;
  --container-xl: 1320px;
}


/* ===== tokens/effects.css ===== */
/* Educação Criativa — Radii, borders, shadows, motion */
:root {
  /* Corner radii — generous & rounded to echo the wordmark */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  /* Signature "bulbo" — organic blob echoing the lightbulb mark */
  --radius-blob: 62% 38% 55% 45% / 48% 58% 42% 52%;      /* @kind other */
  --radius-blob-alt: 40% 60% 46% 54% / 55% 45% 58% 42%;  /* @kind other */

  /* Borders — the brand leans on solid ink outlines, not just shadows */
  --border-hair: 1px solid var(--ink-200);  /* @kind other */
  --border-ink: 2px solid var(--ink-900);   /* @kind other */
  --border-w-bold: 2px;                     /* @kind other */

  /* Shadows — soft, warm, low-spread */
  --shadow-sm: 0 1px 2px rgba(16,16,16,0.06);
  --shadow-md: 0 4px 14px rgba(16,16,16,0.08);
  --shadow-lg: 0 12px 30px rgba(16,16,16,0.12);
  /* Signature "hard" offset shadow — playful, sticker-like */
  --shadow-pop: 4px 4px 0 var(--ink-900);
  --shadow-pop-yellow: 4px 4px 0 var(--yellow-400);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* @kind other */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);/* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
}