/* Tokens da Elegant Garden, extraídos do design system usado pelo Claude Design. Fonte Instrument Sans carregada em app.css. */
/* Palette — hex values transcribed verbatim from "Paleta de cores da marca" (Guia de Marca p.13).
   Names are the brand's own (flower / surface names). */
:root{
  /* Warm family */
  --eg-capuchinha:#FF4F1F;   /* primary brand orange */
  --eg-crisantemo:#C52401;   /* deep burnt red */
  --eg-calendula:#FF7133;    /* light orange */
  --eg-dalia:#FFF6F3;        /* warm off-white */
  /* Cool / dark family */
  --eg-universo:#0B1921;
  --eg-eclipse:#040F14;      /* darkest, primary ink */
  --eg-asfalto:#10242A;
  --eg-grafite:#153134;
  /* Neutrals used in the manual alongside the palette */
  --eg-white:#FFFFFF;
  --eg-ink-wordmark:#030E18;  /* the wordmark's own black in the master lockup */

  /* Surfaces */
  --surface-page:var(--eg-white);
  --surface-cream:var(--eg-dalia);
  --surface-card:var(--eg-white);
  --surface-card-cream:var(--eg-dalia);
  --surface-ink:var(--eg-eclipse);
  --surface-ink-raised:var(--eg-universo);
  --surface-ink-card:var(--eg-asfalto);
  --surface-ink-alt:var(--eg-grafite);
  --surface-accent:var(--eg-capuchinha);
  --surface-accent-deep:var(--eg-crisantemo);
  --surface-accent-light:var(--eg-calendula);
  --surface-overlay:color-mix(in srgb, var(--eg-eclipse) 78%, transparent);

  /* Text */
  --text-primary:var(--eg-eclipse);
  --text-secondary:var(--eg-grafite);
  --text-accent:var(--eg-capuchinha);
  --text-on-accent:var(--eg-white);
  --text-on-dark:var(--eg-white);
  --text-on-dark-muted:var(--eg-dalia);
  --text-inverse:var(--eg-white);

  /* Borders */
  --border-strong:var(--eg-eclipse);
  --border-accent:var(--eg-capuchinha);
  --border-subtle:color-mix(in srgb, var(--eg-eclipse) 14%, var(--eg-white));
  --border-on-dark:color-mix(in srgb, var(--eg-white) 22%, transparent);

  /* Interaction — the brand has no published state palette; these are the
     minimum set needed for interactive work (see readme "Intentional additions"). */
  --state-accent-hover:var(--eg-crisantemo);
  --state-accent-press:#A81E01;
  --state-ink-hover:var(--eg-universo);
  --state-ink-press:#00080B;
  --state-focus-ring:var(--eg-capuchinha);
  --state-disabled-fg:color-mix(in srgb, var(--eg-eclipse) 38%, var(--eg-white));
  --state-disabled-bg:color-mix(in srgb, var(--eg-eclipse) 8%, var(--eg-white));

  /* Semantic status — not defined by the brand manual. Derived from the palette
     so status UI stays in-family. */
  --status-danger:var(--eg-crisantemo);
  --status-warning:var(--eg-calendula);
  --status-info:var(--eg-asfalto);
  --status-success:#1F6B4A;
}

/* Type — Instrument Sans is the primary family (headings, titles, highlights);
   Roboto is the sanctioned secondary/fallback (Guia de Marca p.10–11). */
:root{
  --font-core:"Instrument Sans","Roboto","Helvetica Neue",Arial,sans-serif;
  --font-fallback:"Roboto","Helvetica Neue",Arial,sans-serif;

  --fw-regular:400; /* @kind font */
  --fw-medium:500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:700; /* @kind font */

  /* Scale. The manual sets cover/section type very large against small,
     generously leaded body copy. */
  --fs-display-1:148px;  /* cover word ("Guia de marca" scale) */
  --fs-display-2:96px;
  --fs-display-3:76px;   /* section openers: "Cores", "Elementos gráficos" */
  --fs-heading-1:56px;
  --fs-heading-2:40px;
  --fs-heading-3:32px;   /* right-column section titles */
  --fs-heading-4:24px;
  --fs-title:20px;
  --fs-body-lg:18px;
  --fs-body:16px;
  --fs-body-sm:14px;
  --fs-caption:12px;

  --lh-display:1.0; /* @kind font */
  --lh-heading:1.08; /* @kind font */
  --lh-title:1.25; /* @kind font */
  --lh-body:1.55; /* @kind font */
  --lh-tight:1.15; /* @kind font */

  --ls-display:-0.02em; /* @kind font */
  --ls-heading:-0.015em; /* @kind font */
  --ls-body:0em; /* @kind font */
  --ls-label:0.06em; /* @kind font */
  --ls-wordmark:0.02em; /* @kind font */

  --measure-body:62ch; /* @kind other */
  --measure-narrow:34ch; /* @kind other */
}

/* Spacing — the manual composes on a square grid ("grid quadrado", p.15).
   A 4px base keeps every step a whole grid subdivision. */
:root{
  --space-0:0px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:128px;

  --grid-cell:32px;      /* square-grid unit used for compositions */
  --gutter:24px;
  --page-margin:64px;

  /* Logo protection: clear space = half the emblem's "x" height on every side;
     partner lockups sit x/4 away (Guia de Marca p.4 & p.7). */
  --logo-clearspace-ratio:0.5; /* @kind other */
  --logo-min-height-lockup:40px;  /* never smaller (1 cm) */
  --logo-min-height-emblem:20px;  /* never smaller (0.5 cm) */
}

/* Shape & elevation — Elegant Garden is a hard-edged, flat system.
   Every mark, block and panel in the manual is a true square corner; the only
   round shape in the whole file is the circular avatar crop (p.18).
   Depth is expressed with colour blocks and hairlines, never with shadow —
   the manual explicitly forbids shadows and gradients on the mark (p.6). */
:root{
  --radius-none:0px;
  --radius-full:9999px;   /* circular avatar crop only */

  --border-hairline:1px;
  --border-rule:2px;
  --border-block:4px;
  --border-frame:8px;     /* the thick orange frame around print/social pieces */

  --shadow-none:none;
  --shadow-overlay:0 0 0 100vmax var(--surface-overlay); /* modal scrim */
}

/* Motion — the brand manual specifies no animation. These are the restrained
   defaults this system adds so interactive work stays consistent: short,
   linear-feeling transitions, colour and position only, no bounce or scale-up. */
:root{
  --dur-instant:80ms; /* @kind other */
  --dur-fast:120ms; /* @kind other */
  --dur-base:200ms; /* @kind other */
  --dur-slow:320ms; /* @kind other */
  --ease-standard:cubic-bezier(.2,0,.2,1); /* @kind other */
  --ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
  --ease-in:cubic-bezier(.4,0,1,1); /* @kind other */
  --transition-color:color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);
}

/* Base element defaults. Kept deliberately thin — components carry their own styling. */
:root{color-scheme:light}
body{font-family:var(--font-core);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-primary);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:var(--text-accent);text-decoration:none;border-bottom:var(--border-hairline) solid currentColor;transition:var(--transition-color)}
a:hover{color:var(--state-accent-hover)}
a:active{color:var(--state-accent-press)}
:focus-visible{outline:var(--border-rule) solid var(--state-focus-ring);outline-offset:2px}
::selection{background:var(--eg-capuchinha);color:var(--eg-white)}
.eg-highlight{background:var(--eg-capuchinha);color:var(--eg-white);padding:0 .18em;box-decoration-break:clone;-webkit-box-decoration-break:clone}