/* =============================================================================
   GOOGLE CLOUD — Palette & Design Tokens (single source of truth for the Google Cloud brand)
   =============================================================================
   Scope   : font, color palette and semantic tokens.
   Loaded  : by app/templates/products/googlecloud/ (head_extra block).
   Pairs   : component styles (.gc-*) live in app/static/css/tailwind-input.css
             under the "GOOGLE CLOUD — Design System components" section.
   Source  : values measured on cloud.google.com with Playwright (Oct 2026):
             headings Google Sans 500 / 45px / #212226, body #5f6368, primary
             button #0b57d0 pill (14px 24px), secondary button white + 1px #dadce0
             pill, cards 20px radius, light surface #eff2f7, dark surface #121317,
             tonal chip #d3e3fd / #0842a0. The four brand hues (#4285f4 #ea4335
             #fbbc04 #34a853) come from the official Google Cloud icon kit.
   Icons   : official Google Cloud icon kit (cloud.google.com/icons) and Google
             Workspace product icons, in app/static/img/svg-icon/google-cloud-icons/.

   HOW TO ADD A NEW GOOGLE CLOUD PRODUCT
   1. Copy a template in app/templates/products/googlecloud/ and edit its `gc` config.
   2. No new CSS is needed unless the page introduces a new layout.

   NEVER hard-code a hex value in .gc-* component rules; use a token from here.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. FONT — Google Sans (SIL OFL, Google Fonts). Self-hosted variable font,
      latin subset (covers Spanish and English), see app/static/fonts/google-sans/.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/google-sans/GoogleSans-Variable.woff2') format('woff2');
}

:root {
  /* -------------------------------------------------------------------------
     2. GOOGLE BRAND HUES — the four logo colors, one scale each
     ------------------------------------------------------------------------- */
  --gc-blue-10: #ecf3fe;
  --gc-blue-20: #d3e3fd;   /* Tonal chip / icon wells */
  --gc-blue-30: #a8c7fa;   /* Links and accents on dark (10.8:1 on #121317) */
  --gc-blue-40: #8ab4f8;   /* Stat values on dark */
  --gc-blue-50: #4285f4;   /* GOOGLE BLUE — logo, large accents */
  --gc-blue-60: #1a73e8;
  --gc-blue-70: #0b57d0;   /* Primary button / links on light (6.4:1 on white) */
  --gc-blue-80: #0842a0;   /* Text on tonal blue, button hover */
  --gc-blue-90: #062e6f;   /* Deep blue — gradient anchor */

  --gc-red-40: #f28b82;    /* On dark */
  --gc-red-50: #ea4335;    /* GOOGLE RED */
  --gc-yellow-40: #fdd663; /* On dark */
  --gc-yellow-50: #fbbc04; /* GOOGLE YELLOW */
  --gc-green-40: #81c995;  /* On dark */
  --gc-green-50: #34a853;  /* GOOGLE GREEN */

  /* -------------------------------------------------------------------------
     3. NEUTRAL SCALE
     ------------------------------------------------------------------------- */
  --gc-gray-10: #f8f9fa;
  --gc-gray-20: #eff2f7;   /* Alt section surface (measured) */
  --gc-gray-30: #dadce0;   /* Hairlines / secondary button border (measured) */
  --gc-gray-40: #bdc1c6;
  --gc-gray-50: #80868b;
  --gc-gray-60: #5f6368;   /* Body text (measured, 6.0:1 on white) */
  --gc-gray-70: #3c4043;
  --gc-gray-80: #212226;   /* Headings (measured) */
  --gc-gray-90: #121317;   /* Dark surface (measured) */
  --gc-white: #ffffff;

  /* -------------------------------------------------------------------------
     4. SEMANTIC TOKENS — what components actually consume
     ------------------------------------------------------------------------- */
  --gc-brand: var(--gc-blue-70);
  --gc-brand-hover: var(--gc-blue-80);
  --gc-brand-deep: var(--gc-blue-90);
  --gc-brand-tint: var(--gc-blue-20);
  --gc-brand-tint-text: var(--gc-blue-80);
  --gc-brand-on-dark: var(--gc-blue-30);
  --gc-link: var(--gc-blue-70);
  --gc-link-on-dark: var(--gc-blue-30);

  /* Surfaces */
  --gc-surface-light: var(--gc-white);
  --gc-surface-alt: var(--gc-gray-20);
  --gc-surface-dark: var(--gc-gray-90);
  --gc-surface-dark-2: #1b1c21;

  /* Text */
  --gc-text-heading: var(--gc-gray-80);
  --gc-text-body: var(--gc-gray-60);
  --gc-text-muted: var(--gc-gray-60);
  --gc-text-on-dark: var(--gc-white);
  --gc-text-on-dark-muted: rgba(255, 255, 255, 0.74);   /* ~10:1 on #121317 */

  /* Borders */
  --gc-border-light: var(--gc-gray-30);
  --gc-border-on-dark: rgba(255, 255, 255, 0.14);

  /* Gradients */
  --gc-gradient-cta: linear-gradient(110deg, var(--gc-blue-90) 0%, var(--gc-blue-70) 55%, var(--gc-blue-50) 100%);
  --gc-gradient-bar: linear-gradient(90deg, var(--gc-blue-50) 0 25%, var(--gc-red-50) 25% 50%, var(--gc-yellow-50) 50% 75%, var(--gc-green-50) 75% 100%);

  /* Soft hero washes in the four brand hues */
  --gc-wash-blue: rgba(66, 133, 244, 0.12);
  --gc-wash-red: rgba(234, 67, 53, 0.07);
  --gc-wash-yellow: rgba(251, 188, 4, 0.10);
  --gc-wash-green: rgba(52, 168, 83, 0.08);

  /* Typography */
  --gc-font: 'Google Sans', 'Google Sans Text', Roboto, 'Segoe UI', Arial, sans-serif;

  /* Shape & motion (cloud.google.com: 20px cards, pill buttons) */
  --gc-radius-sm: 8px;
  --gc-radius-md: 12px;
  --gc-radius-lg: 20px;
  --gc-radius-xl: 28px;
  --gc-radius-pill: 9999px;
  --gc-shadow-card: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
  --gc-shadow-card-hover: 0 1px 3px rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
  --gc-ease: 0.25s ease;
}